Getting lightbox to work

5 posts by 2 authors in: Forums > CMS Builder
Last Post: May 12, 2016   (RSS)

By tCote - May 11, 2016 - edited: May 11, 2016

Need help getting lightbox setup. Code as it is on page is below. I can get the box to pop up but images will not rotate. Don't understand where or if I need to include more code somewhere within this area. I have the lightbox script code placed within the head tags.

Using the basic auto template as it works beautifully for my application so the images are setup as they were in the the basic auto pack. Appreciate any help I can get. Thanks. 

Head tags

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Code as in page

<?php foreach ($listing['uploads'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<a href="<?php echo $upload['urlPath'] ?>" rel="lightbox"><img src="<?php echo $upload['thumbUrlPath'] ?> " width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" border="1" title="<?php echo $upload['info1'] ?>" alt="<?php echo $upload['info2'] ?>" /></a><br/>
<?php echo $upload['info3'] ?><br/>
<?php endif ?>
<?php endforeach ?>

<?php if (!$listing['uploads']): /* if no uploads show this: */ ?>
<table cellspacing="0" cellpadding="0" width="125" class="noPhoto" style="height: 100px">
<tr><td bgcolor="#EEEEEE" align="center"><b>Photo<br/>Not<br/>Available</b></td></tr>
</table>
<?php endif; ?>

This is the instructions from Dynamic Drive. 

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

The rel attribute is mandatory in order to activate the effect for this particular image. The "title" attribute is optional, and when defined, adds a caption beneath the enlarged image. The "href" attribute obviously should contain the path to the enlarged image. If you wish a particular caption ("title") to be hyperlinked to a specific URL, throw in a "rev" attribute pointing to the desired URL. For example:

<a href="images/image-1.jpg" rel="lightbox" title="my caption" rev="http://www.dynamicdrive.com">image #1</a>

LightBox version 2 also adds the ability to group multiple image links together, so an image gallery is created out of the enlarged images:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a> <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a> <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

By tCote - May 12, 2016 - edited: May 12, 2016

Nope, If I click on an image it will pop up in the box but will not display next image or arrows to go to next image. Here is a link to one of the pages. Click on a image you can see what happens. 

http://www.diecastdata.com/listingDetail2.php?Dodge-2

If you know of something that would work better that's OK. Just want a very simple image slide. 

By ross - May 12, 2016

Hi.

Thanks for the link. I see the issue now :).

In your code you have the following:

<a href="<?php echo $upload['urlPath'] ?>" rel="lightbox"> ... and then an image tag etc ... 

What you need to do is add a "group name" to the "rel" attribute like this:

<a href="<?php echo $upload['urlPath'] ?>" rel="lightbox['gallery']"> ... and then an image tag etc ...

Notice how I added ['gallery']

Give that a shot and let me know how you make out.

-----------------------------------------------------------
Cheers,
Ross Fairbairn - Consulting
consulting@interactivetools.com

Hire me! Save time by getting our experts to help with your project.
Template changes, advanced features, full integration, whatever you
need. Whether you need one hour or fifty, get it done fast with
Priority Consulting: http://www.interactivetools.com/consulting/

By tCote - May 12, 2016

That did the trick. Thank you very much. Very much appreciated.