Ask and ye shall receive!
lightbox2-files.zip (1.8 MB)
Now .... get ready! DO NOT DRAG ALL FILES INTO HYPE RESOURCES!!!
Just in case you got itchy fingers.
Well, I mean you have to drag them all in but rather than do them all at once. I'd prefer to do them in some sort of order as Hype automagically puts them into the Head for you.
Drag them in this order.
lightbox.min.css
lightbox-plus-jquery.min.js
The rest are the images and a .map file. You can drag these in as you please. The important ones are above.
Please note. I have altered the files here so that everything is pointing to the ${resourcesFolderName}/ special variable (if you replace these with another version then it will break) but now you won't have to depend on the cloud they will be there inside the hype resources folder.
I guess you've overcame the image count thing. But, when you create your images notice there is a data-lightbox
attribute. In my example, i gave this a value of nature. Any image that you want in a lightbox as a group (image 1 of 3, etc) you must have the same attribute value.
data-lightbox="nature"
SO, if you have different layouts and want them to show as separate groups then just change the data-lightbox attribute in each layout to a unique name, like "layout-iPad" for example.
<a style="display: block; width: 100%; height: 100%;" href="link-to-image-1" data-lightbox="layout-iPad"></a>
<a style="display: block; width: 100%; height: 100%;" href="link-to-image-2" data-lightbox="layout-iPad" data-title="with a caption"></a>
<a style="display: block; width: 100%; height: 100%;" href="link-to-image-1" data-lightbox="layout-Desktop"></a>
<a style="display: block; width: 100%; height: 100%;" href="link-to-image-2" data-lightbox="layout-Desktop" data-title="with a caption"></a>
This will then show a lightbox with only 2 images in each layout when clicking on an image. Hope that makes sense.