How to implement seamless switching between multiple nextgen galleries on the same page

Let’s assume you have a wordpress page with multiple nextgen galleries. In my case I wanted to keep the sorting order of photos and maintainability and interleave the photos with some text. So, placing all the images into a single gallery wasn’t an option. And I couldn’t find a setting in the plugin to control generation of HTML representation of a gallery so that after reaching the last photo in a gallery you switch to the first photo in the next gallery. In this post I will tell you how to alter this logic.

Some intro. I use a FancyBox plugin with Nextgen Gallery. When its JS code opens a viewer after a click over an image, it will pick up only the images with exactly the same value in property rel of tag <a>, which wraps tag <img>:

<a href="" 
data-image-id="839" data-title="P_20170208_131157_1200" 
class="ngg-fancybox fancybox image" rel="bccad7e26f86978320c50a335004e619">
<img title="P_20170208_131157_1200" alt="P_20170208_131157_1200" 
style="max-width:100%;" width="140" height="100"></img>

As you can see, by default each NG gallery produces a unique string value for rel property. In this particular case: bccad7e26f86978320c50a335004e619 . I thought it was a hash right from the beginning, and my code inspection proved that right: md5 hash. Actually I could finish the post right here as you have all the data to fix the issue by yourself 😉 But I didn’t.

In my opinion there will be no case, when I need to have several galleries with unique rel values. In other words. it’s OK for me to evaluate md5 hash of a string constant. So the code change is straighforward. Find in the file products/photocrati_nextgen/modules/nextgen_gallery_display/package.module.nextgen_gallery_display.php the line:


and change it this way:


In fact, you can even try getting rid of md5, but I don’t know if the length of generated string is checked somewhere.

If you want to have a more sophisticated solution, you should think of adding a new param into shortcut of a gallery, say, custom_gallery_id:

[ngg_images source="galleries" container_ids="48" 
override_thumbnail_settings="0" thumbnail_width="120" 
thumbnail_height="90" thumbnail_crop="1" 
images_per_page="30" number_of_columns="4" 
ajax_pagination="0" show_all_in_lightbox="0"
use_imagebrowser_effect="0" show_slideshow_link="1" 
slideshow_link_text="Show slides" order_by="sortorder" 
order_direction="ASC" returns="included" 
maximum_entity_count="500" custom_gallery_id="a12"]

Then you need to handle this new param as follows: if it contains a non-null value, md5 hash is evaluated for this value. This way you will have flexible control and backward compatibility. For me it’s an overkill.

There can be a side effect: gallery’s id (overriden by us) is used in containing div for pagination:

<div class="ngg-galleryoverview ngg-ajax-pagination-none" id="ngg-gallery-bccad7e26f86978320c50a335004e619-1">

-1 is for the first page.
I don’t use the pagination, hence I can’t predict the consequences.

Sample page with multiple galleries and seamless switching between them can be seen here: page with several gallery and seamless switching between them

Suggested code change will be removed if you update the Nextgen Gallery plugin, you will have to aplly it again.

You can leave a response, or trackback from your own site.

Leave a Reply