Forum

Thread tagged as: Question

Gallery/Lightbox Template

I have been using this code for a simple gallery/lightbox feature

<a href="images/gallery/gallery-01.jpg" data-lightbox="example-set" title="Text to go here..."><img class="galleryImage" src="images/gallery/gallery-01-thumb.jpg" alt=""/></a>

I need to convert this into a template for client to add their own images. I have tried setting up a template but can't create the link from the thumbnail into the gallery image. This is as far as I have got:

<img class="border" src="<perch:content id="image" type="image" label="Thumbnail image" />" alt="<perch:content id="alt" type="text" label="image description" />"/>

Can anyone help with arranging the code to intergrate the <a><a/> as I guess that's where I am having problems. Or maybe it's something else that I can't quite see?

This is the link with the non-template: https://www.preview.terencedonovan.co.uk/portfolio_nudes.php

This is the link with my attempt at a template: https://www.preview.terencedonovan.co.uk/portfolio_fashion.php

Cheers Paul

Paul Browning 0 points

7 years ago

Neil Duddridge 1 points

7 years ago

We use something like this with one of our client sites, which might point you in the right direction:

<div data-category="all">
<a href="<perch:content type="image" id="image" width="700" label="Image" bucket="scimg" />" rel="lightbox[on]" title="<perch:content id="imagedesc" type="text" label="Image Description" html="false"  help="Enter a description for the image" title="true" />"><img src='<perch:content type="image" id="image" width="700" >' alt='<perch:content id="imagedesc" />' /></a>
</div>

Paul Browning 0 points

7 years ago

Neil Duddridge said:

We use something like this with one of our client sites, which might point you in the right direction:
<div data-category="all">
<a href="<perch:content type="image" id="image" width="700" label="Image" bucket="scimg" />" rel="lightbox[on]" title="<perch:content id="imagedesc" type="text" label="Image Description" html="false"  help="Enter a description for the image" title="true" />"><img src='<perch:content type="image" id="image" width="700" >' alt='<perch:content id="imagedesc" />' /></a>
</div>
Thanks Neil, I have tried to use this as a basis. No joy, but that's me probably being out of my depth with the coding! Thanks again...