Show next image by clicking images in NextGEN Gallery

7 Antworten

NextGEN Gallery is a great plugin for WordPress to embed slideshows in your blog. I used it several times, you can probably find some examples below (and perhaps above if I didn’t stop using it…;).

But – NextGEN Gallery comes with a very user-unfriendly default behavior: if you click on an image, the slideshow will be closed. You have to use two small buttons at the bottom of each image to navigate through the slideshow. And if the images have different sizes, you have to move your mouse after each picture, because the position of the buttons is related to the size of images.

However, since Facebook everybody will expect something different: a click on an image should show the next image and a click somewhere outside the image should close the slideshow. This enables a very easy and fast navigation through the slideshow.

To do that in NextGEN Gallery is quite simple. First of all, we have to change the used slide-effect from Shutter (the default) to Tickbox. To do this, click on Gallery > Options > Effect and select Tickbox from the drop-down list. Now we have to modify the file thickbox.js. You can find it in ../wordpress/wp-includes/js/thickbox/thickbox.js. We have to do the following changes:

Around line 136 we have to replace the whole line starting like:

jQuery("#TB_window").append("<a href='' id='TB_ImageOff'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "</div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='"+thickboxL10n.close+"'><img src='" + tb_closeImage + "' /></a></div>");

to this:

if (!(TB_NextHTML === "")) {

    jQuery("#TB_window").append("<a href='' id='TB_nextPIC'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "</div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='"+thickboxL10n.close+"'><img src='" + tb_closeImage + "' /></a></div>");
}
else {

    jQuery("#TB_window").append("<a href='' id='TB_ImageOff'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "</div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='"+thickboxL10n.close+"'><img src='" + tb_closeImage + "' /></a></div>");
}

Also, we have to add a new line around line 161. Under the line:

jQuery("#TB_next").click(goNext);

we have to add:

jQuery("#TB_nextPIC").click(goNext);

After that changes, you can click right on an image to navigate to the next one. If it is the last picture of the slideshow, the slideshow will be closed.

Best regards,
Thomas Uhrig

7 Gedanken zu „Show next image by clicking images in NextGEN Gallery“

  1. Ourobo

    Solution worked great.

    Small note to anyone trying it: for that second line of code, around line 161, make sure to place right after the already existing line, and above the “}”

    Initially I failed to do that, and this solution didn’t work.

  2. Jaye

    What an awesome post! Thanks so much! I’ve built many galleries with NextGen and always wanted a way to do this. Javascript is not my forte. You rock

  3. Pingback: NextGEN Gallery Customizations – Thickbox Effect | Comox Lake Web Design

  4. Jeka

    I did it differently:
    1. Go to NextGEN Gallery > Options > Effect and select Lightbox
    2. Turn on my theme’s lightbox (named “Colorbox”, I think there is no problem to install it)
    3. Profit!

  5. Mike

    How would you remove the next link in the previous to next part of the image pop up?

  6. Thomas Uhrig Artikelautor

    I would just remove the TB_NextHTML variable from the code I postetd:

    if (!(TB_NextHTML === "")) {

    jQuery("#TB_window").append("<a href='' id='TB_nextPIC' rel="nofollow"><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + "</div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='"+thickboxL10n.close+"' rel="nofollow"><img src='" + tb_closeImage + "' /></a></div>");
}
else {

    jQuery("#TB_window").append("<a href='' id='TB_ImageOff' rel="nofollow"><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + "</div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='"+thickboxL10n.close+"' rel="nofollow"><img src='" + tb_closeImage + "' /></a></div>");
}

    You can remove the previous link in the same way (TB_PrevHTML) or add a comment like “Click on the image to see the next one!”.

  7. Axel Perschmann

    thanks for that post. Might there be a way to realize this also for the shutter gallery?
    I chose it because i like its design the most. :)

Hinterlasse eine Antwort