Separate image galleries in a page with imagelightbox.js

Question

I am using Osvaldas Valutis' excellent imagelightbox.js script (http://osvaldas.info/image-lightbox-responsive-touch-friendly). It works fine, but it doesn't allow me to divide a bunch of images into separate galleries within the same page (it iterates ALL images).

I would like to have all images in the page to have the same data attribute (data-imagelightbox="b") so that they all display in the same way, but find a method to group them into separate galleries, so that when you open one image that belongs to a gallery of 3, it only iterates those 3 images, and then you can close this gallery, and open the next.

<div class="gallery-1">
<a href="images/big/a-1.png" data-imagelightbox="b" class="gal-1">thumb</a>
<a href="images/big/a-2.png" data-imagelightbox="b" class="gal-1">thumb</a>
<a href="images/big/a-3.png" data-imagelightbox="b" class="gal-1">thumb</a>
</div>
<div class="gallery-2">
<a href="images/big/b-1.png" data-imagelightbox="b" class="gal-2">thumb</a>
<a href="images/big/b-2.png" data-imagelightbox="b" class="gal-2">thumb</a>
<a href="images/big/b-3.png" data-imagelightbox="b" class="gal-2">thumb</a>
</div>

I assumed the best way to do this would be to use different selectors to separate images into galleries, for example:

var galleries = [ '.gal-1', '.gal-2', '.gal-3', '.gal-4' ];
$.each( galleries, function()
{
$( selector ).imageLightbox();
});

But the above code doesn't work (it throws an error "undefined selector") and keeps on opening the 6 images above in a complete sequence, instead of dividing them into two different sets...

Any ideas as to how to do this?

Thanks!

score 1 · Accepted Answer · answered Jan 13 '15 at 10:01

1

This method actually works, just in case anyone else encountered the same problem:

var galleries = [ '.animals', '.flowers', '.trees', '.birds' ]; $.each( galleries,
function() { $( selector ).imageLightbox(); });

answered Jan 13 '15 at 10:01

user3596725

11
6

Roamer-1888 · Answer 2 · 2015-01-09T16:45:10.557

0

Earlier answer deleted

Edit

After studying the demo page, it would appear that separate galleries are formed by specifying the value of data-imagelightbox for each gallery before invoking .imageLightbox() on the collection, which is a bit crazy but hey-ho!

You can set data-imagelightbox values in HTML but it's probably easier to do so in javascript, as follows :

$(".gallery-1 a").data('imagelightbox', 'a').imageLightbox();
$(".gallery-2 a").data('imagelightbox', 'b').imageLightbox();
$(".gallery-3 a").data('imagelightbox', 'c').imageLightbox();
$(".gallery-4 a").data('imagelightbox', 'd').imageLightbox();

Thus :

your class names class="gal-1", class="gal-2" etc are not used and can be deleted.
the hard-coded data-imagelightbox="b" attributes are overridden and can be deleted.

edited Jan 09 '15 at 16:45

answered Jan 09 '15 at 14:36

Roamer-1888

19,138
5
33
44

None of these methods seem to work. Images iterate between galleries continuously, instead of just iterating the images within each gallery. – user3596725 Jan 09 '15 at 14:48
Then maybe imageLightbox can't do multiple galleries. If the documentation were better, then we might know. – Roamer-1888 Jan 09 '15 at 14:50
According to its author, it can support multiple galleries, using the method I suggested above. It is the implementation of that method that seems to be faulty... hence my question here... – user3596725 Jan 09 '15 at 14:54
I have deleted my first answer and written another. If it still doesn't work, then I will give up. – Roamer-1888 Jan 09 '15 at 16:48
The problem with your approach is that having different data-imagelightbox attributes, galleries are displayed differently, which is why I indicated in my question that ALL galleries needed to have the same data-imagelightbox="b" attribute, which dictates the look of the lightbox (each of the data-imagelightbox attributes displays the lightbox differently: with or without captions, with or without close icon, with or without arrows, etc). – user3596725 Jan 09 '15 at 21:09
As far as I can tell, having different data-imagelightbox attributes is the *only* way to have separate galleries. Controlling appearance is a separate issue. You have to find a way to give all galleries the same appearance. I'm sure that's not too hard. – Roamer-1888 Jan 10 '15 at 00:16
Allowed data-imagelightbox attributes are limited(a to g), which control which different elements to display. If you use, say, data-imagelightbox="m", the script doesn't work. – user3596725 Jan 11 '15 at 14:37
Where is "a to g" documented? – Roamer-1888 Jan 11 '15 at 17:45
It is not. It just is the way it seems to work: adding further imagelightbox attributes results in the script not working, whereas if you use a to g, it does, with different elements being displayed. – user3596725 Jan 12 '15 at 14:05
As I understand it, a to g are just labels used in the inageLightbox demo page. Each letter is given its own appearance/behaviour by a combination of CSS and the object map passed to `.imageLightbox()`; there should be noting to prevent you defining two or more independent galleries with the *same* appearance/behaviour if that's what you want. Also, I can see no reason why you should be confined to 'a', 'b' etc. 'gallery1', 'gallery2' should work just as well. – Roamer-1888 Jan 12 '15 at 15:04
user3596725, it's best if you post that as an answer, together with the associated HTML. You should then be able to accept your own answer. – Roamer-1888 Jan 12 '15 at 23:23

score 0 · Answer 3 · answered Oct 21 '15 at 01:21

I had the same problem with this plugin. I wanted to create 3 galleries with the same data attribute. Each gallery would have one thumbnail opening multiple images.

What I did with each gallery:

<div class="gallery1">
  <a href="/1.jpg" rel="group1" data-imagelightbox="f">
     <img src="images/gallery1.jpg">
  </a>
 <a href="/2.jpg" rel="group1" data-imagelightbox="f">
     <img style="display: none;" src="" alt="Example"/> /* This helped find the image */
 </a>
</div>

In the javascript I duplicate same functions for "f" but changed it for a new letter "x", and so on.. Each gallery now works independently.

Hope this helps

score 0 · Answer 4 · answered Nov 04 '16 at 13:49

this had been my solution and is working absolutely fine, I hope this can help someone.

I placed this in my JS script after the lightbox configuration:

var dataSelector = '';
$(GALLERY_CONTAINER_SELECTOR).each(function(index, el) {
  dataSelector = $(this).find(IMAGE_ANCHOR_SELECTOR).attr('data-imagelightbox');

  var selector = 'a[data-imagelightbox="' + dataSelector + '"]';
  var instance = $(selector).imageLightbox({
    onStart:    function() { overlayOn(); closeButtonOn( instance );  },
    onEnd:      function() { overlayOff(); captionOff(); closeButtonOff(); activityIndicatorOff(); },
    onLoadStart:  function() { captionOff(); activityIndicatorOn(); },
    onLoadEnd:    function() { captionOn(); activityIndicatorOff(); }
  });
});

And HTML looks like:

<div class="GALLERY_CONTAINER_SELECTOR">
  <a class="IMAGE_ANCHOR_SELECTOR" href="IMAGE_URL_1" data-imagelightbox="YOUR_GALLERY_NAME">IMAGE_1</a>
  <a class="IMAGE_ANCHOR_SELECTOR" href="IMAGE_URL_2" data-imagelightbox="YOUR_GALLERY_NAME">IMAGE_2</a>
  <a class="IMAGE_ANCHOR_SELECTOR" href="IMAGE_URL_3" data-imagelightbox="YOUR_GALLERY_NAME">IMAGE_3</a>
  <!-- Add as many images as needed -->
</div>

Separate image galleries in a page with imagelightbox.js

4 Answers4