CMSB and Lightbox

We have used several different versions, but the easiest is FancyZoom

http://www.remaxofcleburne.com/residential/listing.php/306-Washington-124/

Lightbox 2 was very easy. I followed the newsletter article that Donna wrote.

I've done a few versions of Lightbox (Litebox, Lytebox, etc.) They all get integrated roughly the same way. :)

Thank you all for these suggestions. I've only used Redux and although it's straightforward enough, I'm always keen to hear what other's think.

Now to find that article of Donna's... ;-)

J.

Hello, All

In my experience "Grey Box" is the best system to use. It's very solid and easy to install. It can even utilise "info1, info2, etc.." data for titles and captions.

:0)

Perchpole

Whatever lightbox you use you just need to find the pattern in the list of images. Whether it's a javascript list, or xml, or something else, as long as there is a pattern you can output the code with CMS Builder.

If you can post some code (or an url) that specifies the list of images for Redux I could have a look and let you know how easy it would be to manage with CMS Builder.

Hope that helps!

Hi
What is the solution for Lightbox2? I found the correct thread but does not have the answer :-)

Hi Esteban,

Here are a few excerpts from my CMSB Cookbook http://www.thecmsbcookbook.com that describes the code required to implement Lightbox in a CMSB viewer.

INTEGRATING LIGHTBOX WITH CMSB
The one thing CMS Builder doesn't do is put it's thumbnails in a different directory. It puts them in the same directory and adds a _thumb extension. I've just used the main upload dir for both lgPath and tnPath.

Here’s what lightbox requires:

<?xml version="1.0" encoding="UTF-8" ?>
<gallery>
<album lgPath="album1/images/" tnPath="album1/thumb/" title="Album title" description="Album description" tn="album1/preview.jpg">
<img src="1.jpg" title="" caption="" link="" target="_blank" pause="" />
<img src="1.jpg" title="" caption="" link="" target="_blank" pause="" />
<img src="1.jpg" title="" caption="" link="" target="_blank" pause="" />
<img src="1.jpg" title="" caption="" link="" target="_blank" pause="" />
<img src="1.jpg" title="" caption="" link="" target="_blank" pause="" />
</album>
</gallery>

Where:
lgPath = path to the large version of the photos
tnPath = path to the thumbnails (or preview photo in case of video)
caption = this would show on mouseover of the image
link = if the image is clicked it would follow this link

SETTING UP LIGHTBOX OR MILKBOX TO SHOW IMAGES ON A DETAIL PAGE

The first thing that you’ll need to set up is a multi record editor with a single upload field and some text fields for the information required for both the list page and details page. Mine was called “people”. I also wanted to display the thumbnails in rows of 7 columns each that automatically extended to accommodate additional images.

On my list page there were the normal references to mootools.js and other necessary files and id classes.

And there was the following table to show the thumbnails as desired.

The trick here is that I included a link in the title that appears on the full sized image page that comes up after you click on the thumbnail.

You can’t use actual quotes within the image’s title, or you’ll confuse the code, but you can use " in it’s place. With that little fix, the titles are clickable and lead you to a details page for that image.

<table border="0" id="gallery" cellspacing="0" cellpadding="10" align="center">
<tr valign="middle">
<?PHP foreach ($peopleRecords as $record): ?><?PHP foreach ($record['image'] as $upload): ?>
<td align="center" valign="middle" <?PHP echo $record['border'] ?> width="15%">
<div align="center">

<a href="<?PHP echo $upload['urlPath'] ?>" rel="milkbox[people]" title=<a href=&quot;<?PHP echo $record['_link'] ?>&quot;><h2><?PHP echo $record['title'] ?></h2></a><br>Click the title for more information<br />about this image.<?PHP endif ?>">

<img src="<?PHP echo $upload['thumbUrlPath'] ?>" width="<?PHP echo $upload['thumbWidth'] ?>" height="<?PHP echo $upload['thumbHeight']?>" /></a>

</div></td>
<?PHP $maxCols=7; if (@++$count % $maxCols == 0): ?></tr><tr><?PHP endif; ?>
<?PHP endforeach ?>
<?PHP endforeach ?>
</tr>
</table>

You can use other “if” statements to set the types of caption that appears and combinations of them on the details page to show PayPal information if there’s a price entered for the item.


Hope that get's you started.

Jerry Kornbluth