Some time ago, Dynamicweb Software released a new image gallery module. This image gallery is capable of looking into a folder in the file archive and create a list of thumbnails – from there you can click the thumbnails in order to view a more detailed version of the image.
I haven’t been working much with this module until now – but today one of my customers needed to insert the module twice at the same page. He needed to group different pictures into two different paragraphs.
It turns out, that you cannot just insert the module in two different paragraphs:
- Secondly, the lightbox-effect isn’t able to group the two different image galleries. Meaning that when you click a thumbnail in order to view its larger edition you can navigate ALL images by using the ‘prev’ and ‘next’ buttons.
Fortunately, the solution is simple. First, include Prototype and Scriptaculous via the management center:
This will eliminate the conflicting Prototype-problems.
Finally, to fix the grouping problem, open the “Lightboxborder.html”-template again. Here, you locate the following HTML:
<div class="LBimg"> <a href="<!--@Gallery.Image.Thumb.Large.Path-->" rel="lightbox[img]" title="<!--@Gallery.Image.Name-->"> <!--@Gallery.Image.Thumb.Medium--> </a> </div>
Notice the rel=”lightbox[img]”. Change this to:
<div class="LBimg"> <a href="<!--@Gallery.Image.Thumb.Large.Path-->" rel="lightbox[img<!--@ParagraphID-->]" title="<!--@Gallery.Image.Name-->"> <!--@Gallery.Image.Thumb.Medium--> </a> </div>
The @paragraphID tag will ensure that a unique id is assigned to the lightbox and thereby grouping the images correctly in the lightbox-effect.