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

First of all, I really REALLY apreciate your help! Thanks!

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

Hi

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

By northernpenguin - December 28, 2011

Hi RapidWeb

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

Thanks for your help Jason.

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

OK... I got it to work. I had to make sure to include the full path for the java scripts in the Header. But now the Close image does not come up...
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: [Damon] Adding an image Gallery Using Lightbox

By (Deleted User) - December 29, 2011

Thanks Damon!

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

Hello RapidWeb,

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