Adding an image Gallery Using Lightbox
18 posts by 6 authors in: Forums > CMS Builder
Last Post: December 30, 2011 (RSS)
By (Deleted User) - December 28, 2011
I made the change but still get this error: Notice: Undefined variable: options in /kosher-hotels/kosher-hotel.php on line 118 Notice: Undefined variable: record in /kosher-hotels/kosher-hotel.php on line 118 getuploads: no 'tableName' value specified! Here is the page: http://www.koshertravelinfo.com/kosher-hotels/kosher-hotel.php?Beverly-Hills-Suites-Hotel-Banquettes-1
Re: [RapidWeb] Adding an image Gallery Using Lightbox
By Jason - December 28, 2011
Try changing this line:
<?php foreach (getUploads($options['hotels'], 'images', $record['num']) as $upload): ?>to this:
<?php foreach ($hotelsRecord['images'] as $upload): ?>Hope this helps
Jason Sauchuk - Project Manager
interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
Re: [RapidWeb] Adding an image Gallery Using Lightbox
I wrote a basic script to show you how it should work:
<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php
require_once "cmsbuilder/lib/viewer_functions.php";
list($imagesRecords, $imagesMetaData) = getRecords(array(
'tableName' => 'images',
));
?>
<html>
<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
<table>
<?php foreach ($imagesRecords as $record): ?>
<tr>
<?php foreach ($record['images'] as $upload): ?>
<td><a href="<?php echo $upload['urlPath'] ?>" rel="lightbox[<?php echo $record['album'] ?>]"><img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" /></a></td>
<?php endforeach ?>
</tr>
<?php endforeach ?>
</table>
</body>
</html>My section editor only has two fields: album & images. This allows you an unlimited number of albums and an unlimited number of images per album.
Works great. The layout is up to you.
Enjoy!
northernpenguin
Northern Penguin Technologies
"Any sufficiently advanced technology
is indistinguishable from magic."
........Arthur C. Clarke
Re: [Jason] Adding an image Gallery Using Lightbox
By (Deleted User) - December 28, 2011 - edited: December 28, 2011
The images now display but when any image is clicked it just opens the image full size in the browser. Lightbox stil does not work.
I assume it is the path but don't know how to code PHP.
Here is the current code:
<div align="center">
<?php foreach ($hotelsRecord['images'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<a href="<?php echo $upload['urlPath'] ?>" rel="lightbox[Homepage]" title="<?php echo $upload['info1'] ?>">
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight']?>" />
</a>
<?php elseif ($upload['isImage']): ?>
<a href="<?php echo $upload['urlPath'] ?>" rel="lightbox[Homepage]" title="<?php echo $upload['info1'] ?>">
<img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" />
</a>
<?php else: ?>
<a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a>
<?php endif ?>
<?php endforeach ?>
</div>
</nodesigner>The test page for Lightbox does work on my server. See here please:
http://www.koshertravelinfo.com/index1.html
Please help!
Re: [RapidWeb] Adding an image Gallery Using Lightbox
By (Deleted User) - December 28, 2011
http://www.koshertravelinfo.com/kosher-hotels/kosher-hotel.php?Beverly-Hills-Suites-Hotel-Banquettes-1
I know that the close image is in the right place, because it does work on the test page here:
http://www.koshertravelinfo.com/index1.html
Why does not the close image come up in the Lightbox?
Re: [RapidWeb] Adding an image Gallery Using Lightbox
By Damon - December 29, 2011
When I viewed the broken closed image source I found it was this:
http://www.koshertravelinfo.com/kosher-hotels/images/closelabel.gif
It needs to be this:
http://www.koshertravelinfo.com/images/closelabel.gif
You can change the image path for the loading.gif and closelable.gif in this file:
/js/lightbox.js
Find this code:
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',Change it to this:
fileLoadingImage: '/images/loading.gif',
fileBottomNavCloseImage: '/mages/closelabel.gif',That should work now. Let me know if solves the broken images.
Thanks!
Damon Edis - interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
Re: [Damon] Adding an image Gallery Using Lightbox
By (Deleted User) - December 29, 2011
Works fine now. One more thing...
If you don’t mind have a look on the page. I would like to know why the image loads on top of the page, not in the center. And also, why is there no white space on top of the image just like there is on the sides and the bottom. I am sure this is a simple correction in the style-sheet. You were all so kind to me… I really appreciate all the help I got on this board from Interactive Tools and other members.
Re: [RapidWeb] Adding an image Gallery Using Lightbox
By (Deleted User) - December 30, 2011
We're definitely getting a bit more in depth with this than we normally do, but I think this will fix your problem.
1 - Open the css file for the lightbox
2 - Find the css for the div (search for "#imageContainer")
3 -Add these lines:
position: relative;
top: 10px;4 - Save the file.
This will add a 10px border to the top of the image. Since the lightbox is dynamic, it should automatically adjust the height and width depending on the picture you load so adding this border shouldn't otherwise affect the appearance.
The lightbox itself determines where to 'sit' - you'd have to explore the lightbox.js file to see if there's a reference to how that's calculated.
Hope that helps!
Tom