CMSB and Lightbox

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