Most lightboxes can be used in a single-image or a multi-image setup. In order to convey to the lightbox that images belong together, you need two things.
- To have images that belong together marked up as a group. This is usually done by the rel attribute of the anchor HTML tag (the link). You can check this by inspecting any thumbnail using the right click mouse menu (Chrome, Firefox). Look for this attribute on the a (anchor) element.1234567// single image lightboxrel="lightbox"rel="prettyPhoto"// multi-image lightboxrel="jig[1]"rel="prettyPhoto[]"
- The lighbox activation JavaScript call, such as .prettyPhoto() should catch these elements together. Separate activation calls usually and automatically mean separate groups. For example two distinct JIG instances will not open photos to a common lightbox group.
JIG automatically takes care of these requirements for you. However, in some circumstances the group gets broken. In case you have changed the Lightboxes tab > Link rel setting, revert it tojig[*instance*] if you are on the JIG settings screen orjig(*instance*) in the Shortcode Editor, where you can not use square brackets.
Your theme may be changing the link rels of JIG content to single-image mode
It does so in an effort to add the proper link rels to image links for its lightbox to work. It tries to distinguish between single images in a post content and a gallery. It starts to fail as it doesn't know about JIG, and JIG doesn't know what setup does the theme consider multi-image instead of single-image use. The following example is from the SmartMag theme:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | (function() { var gal_id = 1; $('.post-content a, .main .featured a').has('img').filter(filter_images).attr('rel', 'prettyPhoto'); $('.gallery-slider, .post-content .gallery, .post-content .tiled-gallery').each(function() { gal_id++; // increment gallery group id $(this).find('a').has('img').filter(filter_images) .attr('rel', 'prettyPhoto[gal_'+ gal_id +']'); }); $("a[rel^='prettyPhoto']").prettyPhoto({social_tools: false}); })(); |
What's happening here is that it adds prettyPhoto rel without square brackets to every link that is around an image on the page. Then it tries to find groups of images using a few classes known to contain a gallery, and adds a common link rel such as prettyPhoto[gal_1] or prettyPhoto[gal_2] to each group. If JIG was using any of those classes, it would likely conflict with some CSS rules. Also, it cannot be expected from themes to include "group classes" for every single gallery plugin out there, including JIG. Furthermore, other themes may use different "group classes". You can find code like this by searching for .prettyPhoto( in your theme's custom.js or main.js or similar file.
The solution is to add.not('.justified-image-grid a') right before it adds the single-mode link rel, like this:
1 2 | $('.post-content a, .main .featured a').has('img').not('.justified-image-grid a') .filter(filter_images).attr('rel', 'prettyPhoto'); |
1 2 3 | $('.justified-image-grid, .gallery-slider, .post-content .gallery, .post-content .tiled-gallery').each(function() { // ... }); |