WordPress.org

Ready to get started?Download WordPress

Forums

NextGEN Gallery
How to Make Gallery Responsive to Browser Size?? (30 posts)

  1. joelightfoot
    Member
    Posted 2 years ago #

    Can someone please tell me how to make my gallery responsive to the size of the browser? My whole site is set at responsive, so it would be nice if this plug-in would be also.

    http://wordpress.org/extend/plugins/nextgen-gallery/

  2. wakingmedia
    Member
    Posted 2 years ago #

    I would love to know this too.

  3. torndownunit
    Member
    Posted 2 years ago #

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

  4. emma@iialaska
    Member
    Posted 2 years ago #

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

  5. Stefan83
    Member
    Posted 2 years ago #

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

  6. lolobu
    Member
    Posted 2 years ago #

    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 ?

  7. emma@iialaska
    Member
    Posted 2 years ago #

    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.

  8. lolobu
    Member
    Posted 2 years ago #

    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.

  9. skyewebsites
    Member
    Posted 2 years ago #

    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!

  10. Web Aesthetics
    Member
    Posted 2 years ago #

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

  11. dontlaughmeow
    Member
    Posted 2 years ago #

    @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 =)

  12. dan apparatus
    Member
    Posted 2 years ago #

    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.

  13. skyewebsites
    Member
    Posted 2 years ago #

    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

  14. dan apparatus
    Member
    Posted 2 years ago #

    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!

  15. Daniele
    Member
    Posted 2 years ago #

    Hi,

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

    Any help?

  16. Daniele
    Member
    Posted 2 years ago #

  17. dan apparatus
    Member
    Posted 2 years ago #

    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.

  18. jplusc
    Member
    Posted 2 years ago #

    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!

  19. VesaT
    Member
    Posted 2 years ago #

    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

  20. jplusc
    Member
    Posted 2 years ago #

    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

  21. lolobu
    Member
    Posted 1 year ago #

    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.

  22. jplusc
    Member
    Posted 1 year ago #

    Thanks a lot Lolubu

    You're a star - exactly what I was after!

    Cheers

  23. Web Aesthetics
    Member
    Posted 1 year ago #

    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

  24. sbernado
    Member
    Posted 1 year ago #

    Thank you Lolubu! Appreciate the share.

  25. photocrati
    Member
    Plugin Author

    Posted 1 year ago #

    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

  26. Prateek Gupta
    Member
    Posted 1 year ago #

    [Link removed]

    Help me

  27. esmi
    Forum Moderator
    Posted 1 year ago #

    Stop hijacking other topics and stick to your own topic.

  28. mrangrygrandpa
    Member
    Posted 1 year ago #

    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.

  29. 2olive
    Member
    Posted 1 year ago #

    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

  30. Arathol
    Member
    Posted 1 year ago #

    To everyone in this post. You are looking for a plugin called wp-supersized. you can find it here: http://wordpress.org/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: http://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: http://wordpress.org/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!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.