[Plugin: NextGEN Gallery] How to Make Gallery Responsive to Browser Size??

I will just mention that I have been working with WP Orbit Slider given it’s responsive capabilities and so far have been very pleased. Just need to figure out how to code for transitions on click like NGG does, but I might recommend trying it out.

Guys, did anyone ever work out how to make a NextGen thumbnail gallery responsive? I really need to know how – any help is much appreciated!

There are several views of NextGEN galleries and images, which may need some adjusting for making the view really responsive (or fully ‘fluid’):
– Gallery lists with several thumbnails are basically responsive, the thumbnails will be positioned into several rows according to the screen size
– Single pictures are not basically fully responsive, not at least with all responsive themes. You basically need to strip NGG-related classes (WP does not seem to work ok with them in responsive themes) and define the image size on a page/post in percentages of the viewing area, ie. width = 50%, height=50% will make the images responsive, covering 50% of the content width (also scaling ok vertically)
– Imagebrowser is basically NOT fully responsive. What you should do is to change nggallery.css at its imagebrowser section, setting .imagebrowser img width to 100% (or less of the content width), and inserting a new property: max-height = 400px (or what ever maximum height you want). This way the imagebrowser will turn into responsive.
– For the basic slideshow you can change nggallery.css in a similar manner as imagebrowser. (width=xx% and new property max-height=xxx px)

Hope these help,
Cheers,
Vesa

Hi Vesa

Thanks a lot for your reply. The issue I’m facing is related to the first point you mention. You’re absolutely right, the gallery thumbnails are responsive, in the sense that they will reposition themselves over several rows according to the screen size.

My problem is that I need them to stay on the same row, but simply resize down according to the screen size. Basically, I have a featured image with gallery thumbnails floating on top like this.

The featured image resizes itself according to screen size, but the thumbnails don’t. If they reposition themselves into two rows, they spill out off the featured image, so that’s not very pretty.

Is there any way to get the thumbnails to all resize according to screen size – just like the featured image?

Cheers
Jules

In the css, for .ngg-gallery-thumbnail-box add a width in %

.ngg-gallery-thumbnail-box {
	float: left;
	width: 20%;
}

This for instance will force to have 5 images (100/5=20%) per row whatever the width of the row.

Thanks a lot Lolubu

You’re a star – exactly what I was after!

Cheers

Thanks lolobu,

Tried your code but didn’t work for but gout me thinking. I then fixed my responsiveness issues by adding 100% width and height to the css markup.

.ngg-gallery-thumbnail img {
background-color:#FFFFFF;
border:1px solid #A9A9A9;
display:block;
margin:4px 0px 4px 5px;
padding:4px;
position:relative;
width: 100%;
height: 100%;
}

With this I can keep my NG Gallery Settings at 4 images per row so that the image captions do not overlap.

Thanks

Thank you Lolubu! Appreciate the share.

Hey everyone,

Apart from other things said above, I do want to let everyone know that we’re very aware that responsive galleries need to become a priority for future NextGEN updates. I’m not sure we’ll get to it in the next update, which is already very full, and I’m not sure which approach we’ll take to implement it. But responsive is very high on priority list, and it’s among the most popular feature requests we get.

In any case, for now, I just wanted to let you all know we hear you on this.

Erick

[Link removed]

Help me

Stop hijacking other topics and stick to your own topic.

This is what I tossed in the footer right before the </body> tag:

<script>
jQuery(‘.ngg-slideshow’).width(‘100%’);
jQuery(‘.ngg-slideshow’).height(‘auto’);
jQuery(window).resize(function() { jQuery(‘.ngg-slideshow’).width(‘100%’);});
</script>

The problem I was running into is the window resize. This isn’t the best fix (because the height doesn’t adjust) but it works for the project I’m doing.

Hi all. For those of you who’d like to view their nextgen gallery responsive in a responsive theme, just try this:
– as Iolobu said, in your CSS add a width in % (about 50% for two images, 20% for 5 images) for the class .ngg-gallery-thumbnail-box
– then add this few lines for .ngg-gallery-thumbnail img

.ngg-gallery-thumbnail img{
    max-width: 100%;  // or width: 100%; it depends on your needs
    height: auto;
}

That’s all

To everyone in this post. You are looking for a plugin called wp-supersized. you can find it here: https://www.ads-software.com/extend/plugins/wp-supersized/

You can use it as a full screen slideshow using nextgen gallery or post images or anything. You can also make it responsive and reduce it to a small slider as I have done.

I am still working on my site at the moment and am trying to get it perfect on mobile but you can check it out here: https://www.fin-ex.com/v2 – and yes, i know the site is slow. I have not optimized anything, including the images.

If you minimize the browser window down, you can see how it changes to a normal slideshow. this is all using nextgen gallery.

I had to modify the one php file though to wrap all the images and the nav arorws / icons so i could position them responsively within a container, but you can find what I did here: https://www.ads-software.com/support/topic/changing-place-of-the-navigation-buttons?replies=5#post-3739265

I dont have my css perfect yet, but if you want to try it out this is what ive done (as long as you follow the same class and id names i made in the previous post then it should work for you):

/*===== Slideshow =====*/
/* navigation icons */
a#prevslide, a#nextslide { bottom: 1px; top: auto; width: 25px; height: 25px; background-position: -9px 34px; background-color: #ffffff; opacity: 1 !important; position: fixed;}
a#prevslide {left: 0px;}
a#nextslide {right: 0px;}
#controls-wrapper, #thumb-tray {display: none !important;}
#progress-back {bottom: 30px;}

/*===== Queries =====*/
@media screen and (max-width:600px) {
    /*===== Slideshow =====*/
    .supersizedWrapped {position: relative;}
    ul#supersized, ul#supersized li, ul#supersized a, ul#supersized img {}
    ul#supersized {position: relative;height: 400px;}
    ul#supersized li {position: absolute;}
    ul#supersized a {}
    ul#supersized img {}

    /* slideshow navigation icons */
    #navWrap2 {}
    #arrowNavWrap {}
    a#prevslide,
    a#nextslide,
	a#prevslide:active,
	a#nextslide:active {
		top: 0px;
        bottom: 0px;
        background-repeat: no-repeat;
        height: 100%;
        background: url(img/arrows-nav.png) no-repeat center center scroll #666666;
        width: 22px;
        margin: 0;
		position: absolute;
		}
    a#nextslide, a#nextslide:active {
        right: 0;
        background-position: -18px center;
    }
    a#prevslide, a#prevslide:active {
        left: 0;
        background-position: 0px center;
    }
	/*prevslide:active, #nextslide:active { margin-top:-19px; }*/
	.supersizedWrapped #progress-back {
        position: absolute;
        bottom: 0;
        width: 90%;
        margin: 0 5%;
    }
    .supersizedWrapped #progress-bar {
    position: absolute;

    }
}

I am still looking at implementing this into the site to speed up the images for mobile: adaptive images and there is a wordpress plugin that someone made but their site is dead and i think its out of production. o if anyone could help with that, it would be greatly appreciated.

Hope this helps you all!