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>