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: [RapidWeb] Adding an image Gallery Using Lightbox

By Damon - December 29, 2011

Hi,

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!
Cheers,
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

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.