Next Gen Gallery – Single Thumbnail for an Album?

  • wesbos

    (@wesbos)


    14 years, 9 months 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?

Viewing 15 replies - 16 through 30 (of 30 total)
1 2
  • zemmuonne

    (@zemmuonne)

    14 years, 3 months 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!

    lastraw

    (@lastraw)

    14 years, 2 months ago

    thanks zemmuonne,

    I’m going to try this.

    modern

    (@popart)

    14 years, 1 month 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.

    Jason Narciso

    (@jnarciso04)

    14 years, 1 month 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.

    juri003

    (@juri003)

    14 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?

    grtwordpress

    (@grtwordpress)

    14 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)

    juri003

    (@juri003)

    14 years ago

    That definitely works!

    Thanks

    beatriz-torres

    (@beatriz-torres)

    13 years, 11 months 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

    beatriz-torres

    (@beatriz-torres)

    13 years, 11 months 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!

    lastraw

    (@lastraw)

    13 years, 10 months ago

    zemmuonne,

    A belated thank you!

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

    zemmuonne

    (@zemmuonne)

    13 years, 9 months ago

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

    sebastianburger

    (@sebastianburger)

    13 years, 9 months 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

    diggit2001

    (@diggit2001)

    13 years, 9 months 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!

    sebastianburger

    (@sebastianburger)

    13 years, 9 months ago

    no, it’s not!

    diggit2001

    (@diggit2001)

    13 years, 9 months ago

    Damn.

Viewing 15 replies - 16 through 30 (of 30 total)
1 2
  • The topic ‘Next Gen Gallery – Single Thumbnail for an Album?’ is closed to new replies.