in Coding

Show next image by clicking images in NextGEN Gallery


Here‘s the same for NextGEN + Shutter!


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:

to this:

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

we have to add:

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

  • 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.

  • 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

  • Pingback: NextGEN Gallery Customizations – Thickbox Effect | Comox Lake Web Design()

  • 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!

  • Mike

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

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

      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!”.

  • 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. 🙂

  • Work Great! Thanks!
    But same question – this mod work for shutter gallery too?

  • xang

    Funktioniert mit der neuen Version von Nextgen leider nicht mehr 🙁

    Version 2.0.31

  • I still use 1.9.13 version, because of some known bugs, and after the last wordpress update your solution was killed by something from the update. I’m sure, because my NG is the same (1.9.13) and xang report the same problem, having the 2.0.31 version.

  • Oh, that are bad news. I didn’t look at NG since a couple of weeks (or months?). But maybe when I find some time I will. It was always the best plugin for me, but because of all the trouble (especially with updates) I switched to normal WordPress galleries instead. It’s not that nice, but I don’t want to fix things all the time.

  • Where is your PayPal Button dude ??? This guy is better than google, also if google helped me to find him. He speaks German, so I contacted him friendly per mail. He answered so fast, was helping me and finally asking me if that is all what I need. Damn – guys like him are seldom ! Helping without expectations – that is brave and I promise: If my next cycle trip leads me to the south of Germany I will drink with him liters of Augustiner (haha) or maybe another beer… He can decide.

    Thanks for this great help. Now my pictures are much more comfortable to watch ! For example: http://bike4peace.eu/howrah/

    Peace from Belgrade, Serbia
    Alexandros

  • Pingback: Show next image by clicking images in NextGEN Gallery with shutter effect | Thomas Uhrig()

  • Nice to hear that it works! I also wrote down what you need to do to make it work with NextGEN and the Shutter effect. Here’s the post. Maybe it’s interesting for somebody else.

    http://tuhrig.de/show-next-image-by-clicking-images-in-nextgen-gallery-with-shutter-effect/.

  • Benoit

    Works great, thanks!