Lightbox 2.0 and ImageGallery

E-mail notifications

Posted on 27/02/2008 16:12:53

13 April. 2007 Sebastian Dammark wrote:

The Lightbox 2.0 javascript gallery can now be used togther with the ImageGallery module.

A new tag called @DwPicturePath gives the relative path for the image.

Example: http://demo2007.net.dynamicweb.dk/Default.aspx?ID=24

For installation/implementation just follw this description:

http://www.huddletogether.com/projects/lightbox2/#how

It's very easy ...

// Dammark

Well if you never have used the ImageGallery module, it's not very easy.

Could someone please give better instructions on how to implement the Lightbox script.

I've managed to get it to work beside the ImageGallery module as described here

http://www.huddletogether.com/projects/lightbox2/#how

But I have no clue what template file to modify and howto get it to work as in the demoURL above?

@DwPicturePath ??? Eh? How does this help me in this matter?

These are the templatefiles for the ImageGallery that I assume I need to modify?:

AllTags.html

Coloumn_Element.html

Coloumn_List.html

Coloumn_ListElement.html

Element.html

List.html

ListElement.html

Please give me some support here. It's frustrating being a designer and not understand the DW basics.

Best regards.

Replies

Posted on 27/02/2008 16:28:32

Hi Andreas

1. Make your gallery work without the lightbox script.

2. Download the files for lightbox and upload them to the systems folder in your file manager.

3. Following the lightbox guide in Part 1 - Setup: Include the javascript and css in your mastertemplate.

4. Following the lightbox guide in Part 2 - Activate: You should now edit the template selected in 'Template - List element' in your paragraph settings.

It's here you need to use @DwPicturePath in the href attribute on the a-tag. Remember to add the rel attribute to your a-tag as well since this is the connection to the lightbox scrigt.

// Sebastian

Nicolai Høeg Pedersen

Posted on 27/02/2008 16:31:24

The list of templates is actually two different sets of temlates for this module, using different layout.

But changing either one to the lightbox thing is easy. In either Coloumn_ListElement.html or ListElement.html change the image to the following.

a href="" rel="lightbox[1]">a>

Then make sure you include the correct js files as described in the page you have found in the Coloumn_List.html or List.html template.

Posted on 27/02/2008 16:34:39

Exactly

Posted on 27/02/2008 16:37:00

LOVELY! It works!

You must be logged in to post in the forum

Developer forum