WordPress.org

Ready to get started?Download WordPress

Forums

Next Gen Gallery - Single Thumbnail for an Album? (31 posts)

  1. wesbos
    Member
    Posted 4 years ago #

    Hey Everyone,

    I am looking for a way to display multiple galleries on a page (which Next gen gallery already does), but to have only 1 thumbnail which launches a the gallery of images in thick box.

    I tried putting 1 thumbnail for each page and hiding the pagination, but thick box only shows 1 image that way.

    Any ideas?

  2. adamJB
    Member
    Posted 4 years ago #

    I'm actually trying to do the same thing as we speak. I'll post back if I figure it out.

  3. adamJB
    Member
    Posted 4 years ago #

    I have a solution :D

    Thickbox, Highslide, and all those fantastic js viewers out there need the links to be in the page, just hidden. If you look at the examples of highslide for example that shows one thumbnail for a popup that shows a gallery of images, they are just setting the display of all the other thumbnail links to display:none. So everything is still there which is why we can't have NextGen only show one thumbnail.

    Ideally NextGen could create a div around all the thumbnails except for the first one and give us the option to display them or not. But since that's not the case I have a different solution that I'm pretty sure works in every browser.

    Every NextGen gallery is enclosed by a div of class "ngg-galleryoverview" we will set the height and width of this div to match the height and width of one thumbnail and then set the overflow to hidden (We will also add position:relative for IE). So in wp-content/plugins/nextgen-gallery/css/ edit "nggallery.css" and add this at the bottom:

    .ngg-galleryoverview {
    	overflow: hidden;
    	position: relative;
    	height: 97px;
    	width: 122px;
    }

    The height and width will depend on your thumbnail size. 122 x 97 works for the default ( 100 x 75 ).

    One caveat is that let's say you want your gallery thumbnail to be something large, your site will load that size thumbnail for every image in your gallery and take forever to load. But if you're sticking with a reasonably small thumb, I think it will be fine.
    It's not the best solution. But it will work.

  4. wesbos
    Member
    Posted 4 years ago #

    Great idea! Thanks a ton, really helped me out.

  5. Piotr
    Member
    Posted 4 years ago #

    Hello!
    Thank you for that. Better than nothing. Would love to see this as really working feature in Nextgen. Alex - please fix this option. A lot of peoples looking for this!

    Guys - any other solution or plugin which can really do the thing?

  6. seejordan
    Member
    Posted 4 years ago #

    The overflow trick works, sure. But, I need something more elegant, that allows for width/height to be set at the page level with a
    [singlepic id=x w=width h=height]
    tag, not at the style level. Yes, I could have style on a div around every gallery that gets set manually, but again, not elegant for a CMS, where I'll be turning this over for someone else to add photos to.

    Any help greatly appreciated.

    Cj

  7. diggit2001
    Member
    Posted 4 years ago #

    I was looking for a solution to this same issue and implemented it on my site. Although it looks great in IE8, when I look at the page in FireFox, it displays all thumbnails in a very long vertical column. I don't know much about the code, so I'm not sure how to address this.

    Anyone else had this problem?

    Thanks

  8. thirdsister
    Member
    Posted 4 years ago #

    Yes, I'm trying to do the same thing- to have many images in sep. galleries but show just a single thumbnail for each gallery on the gallery page. As it stands, the first 2 galleries eat up all the existing space and the remaining 3 don't display at all...is there a resolution?

  9. Djarn
    Member
    Posted 4 years ago #

    My solution to this, was to start the blog, hen insert with nextgen, but just insert a picture rather than an album, then I clicked on the more button, then under that, I inserted the full gallery

  10. abchilla
    Member
    Posted 4 years ago #

    No one knows how to show one thumbnail for a whole gallery?

    I am facing the same issue. thought this must be done managing galleries. at least giving me the options how i want to display the gallery. i just one thumbnail, if i click on this thumbnail the gallery opens... is it possible to launch a gallery via a url??? something like http/mypage/gallery1 ? wrap this with a href?? dont know.. just looking for a solution!!

  11. hugsformonsters
    Member
    Posted 4 years ago #

    I'm sort of...amazed? This seems like such a basic thing. It's not even like you're creating additional functionality. You're REMOVING a function. There's really no fix for this aside from a CSS hack? It seems like something that would be on the very front page of the plugin as "Thumbnails to display per gallery".

    I have been looking around all week for some kind of solution and there's nothing. Literally nothing aside from the CSS hack.

    Ughhhhh.

  12. diggit2001
    Member
    Posted 4 years ago #

    I agree. Very frustrating. I have nothing constructive to add to this conversation, I just wanted to express my interest in finding a better solution for this issue.
    Thanks

  13. abchilla
    Member
    Posted 4 years ago #

    So anyone has a proper solution for this???

    Still going crazy on that!

  14. greendog99
    Member
    Posted 4 years ago #

    This is exactly the way I would like to use the gallery function! In the meantime are there any other plug-ins that would do it?

  15. elpedro
    Member
    Posted 4 years ago #

    yes i have used display none with success in the past but i also want to use as a cms and don't want users to set it up.

  16. lastraw
    Member
    Posted 4 years ago #

    Me too.

  17. zemmuonne
    Member
    Posted 4 years ago #

    Hi,
    I managed to make it work with a dirty, dirty, dirty hack. DO IT AT YOUR OWN RISK!
    If I got some spare time I'm gonna try to improve it, but in the meantime you can:

    1) Set under Options > Gallery >Number of images per page:

      -1

    and Add hidden images:

      true


    2) Open nggfunctions.php, around line 250 you'll find:

    if ($maxElement > 0 && $ngg_options['galHiddenImg']) {
    	  		if ( ($index < $start) || ($index > ($start + $maxElement -1)) ){
    				$picturelist[$key]->hidden = true;
    				$picturelist[$key]->style  = ($gallery->columns > 0) ? 'style="width:' . floor(100/$gallery->columns) . '%;display: none;"' : 'style="display: none;"';
    			}
      			$index++;
    		}

    right below add:

    if ( $maxElement==-1 && $ngg_options['galHiddenImg']) {
    	  		if ( ($index > 0)  ){
    				$picturelist[$key]->hidden = true;
    				$picturelist[$key]->style  = ($gallery->columns > 0) ? 'style="width:' . floor(100/$gallery->columns) . '%;display: none;"' : 'style="display: none;"';
    			}
      			$index++;
    		}

    Works perfectly with shadowbox. I'm gonna try to change it per gallery, I think I should hack nggfunctions.php and shortcodes.php, plus some admin part to add an option. For example add a checkbox "Single Thumbnail" when inserting a gallery. Let me know!

  18. lastraw
    Member
    Posted 4 years ago #

    thanks zemmuonne,

    I'm going to try this.

  19. popart
    Member
    Posted 4 years ago #

    @zemmuonne

    Thanks. That works for me (using Highslide JS), but it doesn't show the 2nd thumbnail after the gallery launches. The second image is there if you click "Next", but it would be nice if the preview thumbnail was also visible.

  20. jnarciso04
    Member
    Posted 4 years ago #

    @zemmuonne - do you know if there is a way to include the gallery title using that workaround as well.

    In other words, whatever you input for the gallery title will also show up under or next to the thumbnail.

  21. juri003
    Member
    Posted 4 years ago #

    Hi,

    Thanks for you hack zemmuonne! For me it works ok with thickbox but not with highslide or lightbox in IE7. Is there a workaround or otherwise a trick to make it work in IE7?

  22. grtwordpress
    Member
    Posted 4 years ago #

    How about using the images attribute in the shortcode, eg [nggtags gallery='201004_tut' images='1']. The only edit you would need I believe is changing the code for the pagination check from

    // check for page navigation
    if ($maxElement > 0)

    to

    // check for page navigation
    if ($maxElement > 1)

  23. juri003
    Member
    Posted 4 years ago #

    That definitely works!

    Thanks

  24. beatriz torres
    Member
    Posted 4 years ago #

    Hello, I'm creating a portfolio web and I have a problemm with the albums.
    My album thumbnails appear in columns and I want them in a row!
    Here is the CSS. Please, anyone know how to do it?

    /*
    CSS Name: Default Styles
    Description: NextGEN Default Gallery Stylesheet
    Author: Alex Rabe
    Version: 1.50

    This is a template stylesheet that can be used with NextGEN Gallery. I tested the
    styles with a default theme Kubrick. Modify it when your theme struggle with it,
    it's only a template design

    */

    /* ----------- Album Styles Extend -------------*/

    .ngg-albumoverview {
    margin-top: 10px;
    width: 100%;
    clear:both;
    display:inline-block !important;
    }

    .ngg-album {
    height: 100%;
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid #fff;
    }

    /* IE6 will ignore this , again I hate IE6 */
    /* See also http://www.sitepoint.com/article/browser-specific-css-hacks */
    html>body .ngg-album {
    overflow:hidden;
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid #cccccc;
    }

    .ngg-album {
    overflow: hidden;
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid #cccccc;
    }

    .ngg-albumtitle {
    text-align: left;
    font-weight: bold;
    margin:0px;
    padding:0px;
    font-size: 1.4em;
    margin-bottom: 10px;
    }

    .ngg-thumbnail {
    float: left;
    margin-right: 10px;
    }

    .ngg-thumbnail img {
    background-color:#FFFFFF;
    border:1px solid #A9A9A9;
    margin:4px 0px 4px 5px;
    padding:40px;
    position:relative;
    }

    .ngg-thumbnail img:hover {
    background-color: #A9A9A9;
    }

    .ngg-description {
    text-align: left;
    }

    /* ----------- Album Styles Compact -------------*/

    .ngg-album-compact {
    display: inline-block;
    height:180px;
    padding-right:6px !important;
    margin:0px !important;
    text-align:center;
    width:120px;
    }

    .ngg-album-compactbox {

    background:transparent url(albumset.gif) no-repeat scroll 0%;
    height:86px;
    margin:0pt 0pt 6px !important;
    padding:12px 0pt 0pt 7px !important;
    width:120px;
    text-align: left;
    }

    .ngg-album-compactbox .Thumb {

    border:1px solid #000000;
    margin:0px !important;
    padding:0px !important;
    width:91px;
    height:68px;
    }

    .ngg-album-compact h4 {

    font-size:15px;
    font-weight:bold;
    margin-bottom:0px;
    margin-top:0px;
    width:110px;
    }

    .ngg-album-compact p {

    font-size:11px;
    margin-top:2px;
    }

    /* ----------- Gallery style -------------*/

    .ngg-galleryoverview {

    overflow: hidden;
    margin-top: 10px;
    width: 100%;
    clear:both;
    display:block !important;
    }

    .ngg-galleryoverview .desc {
    /* required for description */
    margin:0px 10px 10px 0px;
    padding:5px;
    }

    .ngg-gallery-thumbnail-box {
    float: left;

    }

    .ngg-gallery-thumbnail {
    float: left;
    margin-right: 15px;
    text-align: center;

    }

    .ngg-gallery-thumbnail img {
    background-color:#FFFFFF;
    border:1px solid #A9A9A9;
    display:block;
    margin:15px 10px 15px 10px;
    padding:5px;
    position:relative;
    }

    .ngg-gallery-thumbnail img:hover {
    background-color: #A9A9A9;
    }

    .ngg-gallery-thumbnail span {
    /* Images description */
    font-size:90%;
    padding-left:5px;
    display:block;
    }

    .ngg-clear {
    clear: both;
    }

    /* ----------- Gallery navigation -------------*/

    .ngg-navigation {
    font-size:0.9em !important;
    clear:both !important;
    display:block !important;
    padding-top:15px;
    text-align:center;

    }

    .ngg-navigation span {
    font-weight:bold;
    margin:0pt 6px;
    }

    .ngg-navigation a.page-numbers,
    .ngg-navigation a.next,
    .ngg-navigation a.prev,
    .ngg-navigation span.page-numbers,
    .ngg-navigation span.next,
    .ngg-navigation span.prev {
    border:1px solid #DDDDDD;
    margin-right:3px;
    padding:3px 7px;
    }

    .ngg-navigation a.page-numbers:hover,
    .ngg-navigation a.next:hover,
    .ngg-navigation a.prev:hover,
    .ngg-navigation span.page-numbers:hover,
    .ngg-navigation span.next:hover,
    .ngg-navigation span.prev:hover {
    background-color: #0066CC;
    color: #FFFFFF !important;
    text-decoration: none !important;
    }

    /* ----------- Image browser style -------------*/

    .ngg-imagebrowser {

    }

    .ngg-imagebrowser h3 {
    text-align:center;
    }

    .ngg-imagebrowser img {
    border:1px solid #A9A9A9;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    display:block !important;
    padding:5px;
    }

    .ngg-imagebrowser-nav {
    padding:5px;
    margin-left:10px;
    }

    .ngg-imagebrowser-nav .back {
    float:left;
    border:1px solid #DDDDDD;
    margin-right:3px;
    padding:3px 7px;
    }

    .ngg-imagebrowser-nav .next {
    float:right;
    border:1px solid #DDDDDD;
    margin-right:3px;
    padding:3px 7px;
    }

    .ngg-imagebrowser-nav .counter {
    text-align:center;
    font-size:0.9em !important;
    }

    .exif-data {
    margin-left: auto !important;
    margin-right: auto !important;
    }

    /* ----------- Slideshow -------------*/
    .slideshow {
    margin-left: auto;
    margin-right: auto;
    text-align:center;
    outline: none;
    }

    .slideshowlink {

    }

    /* ----------- Single picture -------------*/
    .ngg-singlepic {
    background-color:#FFFFFF;
    display:block;
    padding:4px;
    }

    .ngg-left {
    float: left;
    margin-right:10px;
    }

    .ngg-right {
    float: right;
    margin-left:10px;
    }

    .ngg-center {
    margin-left: auto !important;
    margin-right: auto !important;
    }

    /* ----------- Sidebar widget -------------*/
    .ngg-widget,
    .ngg-widget-slideshow {
    overflow: hidden;
    margin:0pt;
    padding:5px 0px 0px 0pt;
    text-align:left;
    }

    .ngg-widget img {
    border:2px solid #A9A9A9;
    margin:0pt 2px 2px 0px;
    padding:1px;
    }

    /* ----------- Related images -------------*/
    .ngg-related-gallery {
    background:#F9F9F9;
    border:1px solid #E0E0E0;
    overflow:hidden;
    margin-bottom:1em;
    margin-top:1em;
    padding:5px;
    }
    .ngg-related-gallery img {
    border: 1px solid #DDDDDD;
    float: left;
    margin: 0pt 3px;
    padding: 2px;
    height: 50px;
    width: 50px;
    }

    .ngg-related-gallery img:hover {
    border: 1px solid #000000;
    }

    /* ----------- Gallery list -------------*/

    .ngg-galleryoverview ul li:before {
    content: '' !important;
    }

    .ngg-gallery-list {
    list-style-type:none;
    padding: 0px !important;
    text-indent:0px !important;
    }

    .ngg-galleryoverview div.pic img{
    width: 100%;
    }

    .ngg-gallery-list li {
    float:left;
    margin:0 2px 0px 2px !important;
    overflow:hidden;
    }

    .ngg-gallery-list li a {
    border:1px solid #CCCCCC;
    display:block;
    padding:2px;
    }

    .ngg-gallery-list li.selected a{
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:#000000 none repeat scroll 0 0;
    }

    .ngg-gallery-list li img {
    height:40px;
    width:40px;
    }

    li.ngg-next, li.ngg-prev {
    height:40px;
    width:40px;
    font-size:3.5em;
    }

    li.ngg-next a, li.ngg-prev a {
    padding-top: 10px;
    border: none;
    text-decoration: none;
    }

    Thank you very much

  25. beatriz torres
    Member
    Posted 4 years ago #

    This is the page I'm talking about

    http://beatriztorres.net/wordpress/?page_id=19

    I have a column and I want a row!

  26. lastraw
    Member
    Posted 4 years ago #

    zemmuonne,

    A belated thank you!

    beatriz torres, did you try changing the setting in Options/Gallery/Number of columns?

  27. zemmuonne
    Member
    Posted 4 years ago #

    Hi everybody,
    afaik it's been added as an option by the original author - yay!

  28. sebastianburger
    Member
    Posted 4 years ago #

    Thanks to grtwordpress!
    His solution is way better because you can decide which of your albums shall display 1 ore x pictues.
    The only thing I wonder is: how could I manage to dislay only 1 picture, which is not the first without altering the picture order.

    And even more urgent: with this solution: how can I enable the page navigation only for these "1 Picture solutions" ? Cause in the other galleries I just want to have my usual amount of 40 pics running and being visible on the first glance.
    Thanks, Seba

  29. diggit2001
    Member
    Posted 4 years ago #

    @zemmuonne Is it really an option in the plugin now? If so, I can't figure out how to enable it. Would you mind telling me how to use it?

    Thanks!

  30. sebastianburger
    Member
    Posted 4 years ago #

    no, it's not!

Topic Closed

This topic has been closed to new replies.

About this Topic