Show next image by clicking images in NextGEN Gallery V2.0.40

Last year I posted two modifications for the WordPress plugin NextGen Gallery and its Thickbox and Shutter effect (here is the old one for Thickbox and the old one for Shutter). The modification makes it possible to click on the current image to go forward to the next image. To close the slideshow you can just click somewhere beneath the image. This is the same behavior as on many popular website such as Facebook.

Unfortunately, NextGen Gallery released a new version of its WordPress plugin which breaks my fix. The new version of NextGen Gallery V2.0.40 was released in November 2013 and doesn’t work with my fix any more!

So here is the new fix.

Fix for Thickbox in NextGen Gallery V2.0.40

To adjust the Thickbox effect in the current version of NextGen Gallery (V2.0.40) is quite easy. It is nearly the same fix as for the old version (only the markup for the close button is different). Here it is:

Open the file thickbox.js in our WordPress installation. You can do this via FTP or with a WordPress plugin such as wp-FileManager. In both cases you will find the file in ../wordpress/wp-includes/js/thickbox/thickbox.js. You have to do the following two changes to the file:

Around line 132 you will find the following line:

Replace the complete line with the following code:

Now you have to add a new line around line 161. Under the line:

you have to add:

Save the file. That’s it.

Fix for Shutter in NextGen Gallery V2.0.40

Open the file shutter.js in our WordPress installation. You can do this via FTP or with a WordPress plugin such as wp-FileManager. In both cases you will find the file in ../wordpress/wp-content/plugins/nextgen_gallery/products/photocrati_nextgen/modules/lightbox/static/shutter/shutter.js. You have to do the following two changes to the file:

Around line number 143 there should be a line like this:

Replace the complete line with the following code:

Now you have to add a new function just before this code around line 153:

Add this function to the file:

Note that the comma at the end is important! Now the file should look like this:

NextGEN-Shutter-Mod

Save the file. That’s it. And by the way, this is the same fix as for the old version!

Download the files

I know that fixing some JavaScript files is ugly, so here are the modified files. Just replace the original one:

shutter.js (replace ../wordpress/wp-content/plugins/nextgen_gallery/products/photocrati_nextgen/modules/lightbox/static/shutter/shutter.js)

thickbox.js (replace ../wordpress/wp-includes/js/thickbox/thickbox.js)

Best regards,
Thomas

Show next image by clicking images in NextGEN Gallery with shutter effect


Here‘s the same for NextGEN + Thickbox!


Last year I posted an article about modifying NextGEN Gallery (with Thickbox) to show the next image when you click on the current one. This behaviour is well known from Facebook an co. To go to the next picture, just click on the current one. To close the slideshow, just click beside the picture. Easy. You can find the article here.

Since I used the Thickbox effect in my modification, a lot of people asked me if it is possbile with the Shutter effect, too. Of course it is!

Here’s what you have to do to modify NextGEN Gallery with the Shutter effect to display the next image by clicking on the current one. I tested it with WordPress 3.7.1 und NextGen 2.0.33.

1 – Open the file wp-content/plugins/nextgen_gallery/products/photocrati_nextgen/modules/lightbox/static/shutter/shutter.js

2 – Arround line number 143 there should be a line like this:

You have to replace this line with the following one:

3 – Now you have to add a new function just before

Here’s the function you have to add:

Now the file should look like this:

NextGEN-Shutter-Mod

That’s it! I hope it works for everyone.

Best regards,
Thomas

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

Posting Speaker Deck Presentations in WordPress

I’ve recently tried to post a Spreaker Deck presentation on my WordPress blog. But a problem using Google’s Chrome browser came up to me: Chrome throws a scripting exception when I post the embedded code.

The exception:

The embedded code:

Chrome seems to refuse the execution of the script – perhaps to prevent something like cross-site-scripting. But the solution is pretty simple. First, install a new plugin to your wordpress blog to embed Speacker Deck presentations. Then fix it by changing the method to:

Here‘s the post for the fix. Thanks!

Plugin: http://wordpress.org/extend/plugins/speakerdeck-embed

Fix: http://wordpress.org/support/topic/plugin-speaker-deck-embed-add-https-support

Best regards,
Thomas Uhrig