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

I would love to know this too.

I’d like to know the same thing. Or if there is another plug-in out there that is responsive.

I would also like to know how to do this – having trouble trying to use custom css style sheets for mobile.

I’m also looking for a responsive slider/gallery that works with NextGen

Do you mean that you want the size of the thumbs to change according to the width of your page so that you always have the same number of thumbs in a row ?

I’m not sure about others, but what I’m interested is in resizing the slideshows that are full width on pages to show up in mobile browsers.

I don’t use nextgen slideshow so I can’t help on that. I just worked a bit on the gallery to make the thumbs responsive.

To make the slideshow responsive (within a responsive theme) without making changes to the core Nextgen code you have to overide the element style that is generated by the plugin based on your slideshow settings.

First find the Div id e.g.

<div id="ngg-slideshow-2-7-1" class="ngg-slideshow" style="height:640px;width:960px;">

Next, reset both height and width using jQuery.

<script>
jQuery('#ngg-slideshow-2-7-1').width('100%');
jQuery('#ngg-slideshow-2-7-1').height('auto');
</script>

I output these at the bottom of the page in wp_footer()

This works on iPad and iPhone.

I looked for an official fix / extension for ages, then decided to fix the old fashion way by code – hope it’s useful!

Thanks skyewebsites but I’m not sure how or where I’m supposed to add this code. Can you explain it a bit more?

@skyewebsites, I’m having trouble finding exactly where to insert your code. Is this just added in the footer.php before the /body? Any help you can provide would be greatly appreciated! Thanks =)

Did anyone ever successfully figure out the exact location that this script needs to be written into? Trying to figure it out myself by process of elimination and I’m not getting anywhere.

the code e.g.

<script>
jQuery('#ngg-slideshow-2-7-1').width('100%');
jQuery('#ngg-slideshow-2-7-1').height('auto');
</script>

needs to be at the bottom of the page i.e. one of the last items before

</body>

If you post the url of your site I’ll take a look for you

Thanks. Sadly, I’m working locally so there’s no url to share and am still having difficulty. I’ve got the code tweaked for my slideshow, but I’m still unclear as to what exact page it needs to go on the bottom of. I tried applying it to the the bottom of footer.php in my child theme right before </body>, but got nothing. I’ve also tried to paste it into header.php as well.

I am using Responsive theme ver. 1.7.4

Any insight? Thanks again!

Hi,

i’ve do it exactly like u saw but it doesn’t work.

Any help?

my uRL site is: https://www.hoteldelnegro.com/