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 ross - May 12, 2016
Hi there.
Thanks for posting.
When you say this:
I can get the box to pop up but images will not rotate
Do you mean that everything is working and the problem is that some images display sideways?
If that's the case, the issue is that the image itself was taken sideways on the camera originally and you'll need to rotate them before uploading.
This can be tricky to see because when you look at the picture on your computer, your operating system will auto rotate images. Unfortunately, web browsers don't do that as well and you end up with sideways images.
If I've missed the mark, could you post a link to your gallery so I can actually see it in action? If you don't want to post a link to your site, you can send it to me in a support request here:
https://www.interactivetools.com/support/email_support_form.php
Thanks!
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 - 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/