Inserting two image gallery paragraphs on one page in Dynamicweb CMS

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:

  • First of all, the module utilizes the Prototype Framework, the Scriptaculous Effects Library and the Lightbox-effect (http://www.lokeshdhakar.com/projects/lightbox2/). The templates include references to all these JavaScript-files and therefore the page won’t look pretty if you just insert two paragraphs with the image gallery module.
  • 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 is how you set up Google API includes in Dynamicweb CMS

After this is done, you remove the corresponding references in the “Lightboxborder.html”-template. There is still reference to the Lightbox effect JavaScript, and there is still some <style> tags left. Just move this into the page-template.

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s