Using thumbs & images in a gallery

Hi degreesnorth,

If I understand what you're looking for, here's a set of recipes from my CMSB Cookbook http://www.thecmsbcookbook.com that might help get you started. There are other recipes that address fancybox and other viewer implementations in the Cookbook as well.

Hope they help,

Jerry Kornbluth

INTEGRATING LIGHTBOX WITH CMSB - Updated Aug 3rd, 2010

Here’s the basic code that lightbox requires:
_____ code ________________________________________________

<?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:

_____ code ________________________________________________

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

__________________________________________________________

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 some code for a page viewer. Ideally you'd have a list viewer that would list albums and then you'd click through to this one to
display an album. You could also direct link to a specific album. This one assumes you have some fields defined called: title, and
description. Also you'll need to change the Table name and the require_once path to match your server.

_____ code ________________________________________________

<?PHP echo "<?xml version='1.0' encoding='UTF-8'?>\n";
require_once "../lib/viewer_functions.php";
$options = array(); $options['Table name'] = 'news';
$options['recordNum'] = '';
$options['where'] = '';
$record = getRecord($options);
?>
<gallery>
<album lgPath="<?PHP echo $SETTINGS['uploadUrl']; ?>
tnPath="<?PHP echo $SETTINGS['uploadUrl']; ?>"
title="<?PHP echo htmlspecialchars($record['title']); ?>"
description="<?PHP echo htmlspecialchars($record['description']); ?>" tn="album1/preview.jpg">

<?PHP if ($record): ?>
<?PHP foreach (getUploads($options['Table name'], 'uploads', $record['num']) as $upload): ?>
<img src="<?PHP echo htmlspecialchars($upload['filename']); ?>"
title="<?PHP echo htmlspecialchars($upload['info1']); ?>"
caption="<?PHP echo htmlspecialchars($upload['info2']); ?>"
link="<?PHP echo $upload['urlPath'] ?>"
target="_blank"
pause="" />
<?PHP endforeach ?>
<?PHP endif ?>
</album>
</gallery>


SETTING UP LIGHTBOX OR MILKBOX TO SHOW IMAGES ON A DETAIL PAGE - Updated Feb 27th, 2012

Revised for Milkbox version 3.0.3 http://reghellin.com/milkbox/
This new version works with IE 9 and keeps the titles from popping up as as tooltips when you rollover the thumbnails.
It also automatically re-sizes image to fit the browser window

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 the Mootools and Milkbox files in the folder milkbox3.0.3.

_____ code ________________________________________________

<script src="milkbox3.0.3/js/mootools-core.js"></script>
<script src="milkbox3.0.3/js/mootools-more.js"></script>
<script src="milkbox3.0.3/js/milkbox-yc.js"></script>
<link rel="stylesheet" href="milkbox3.0.3/css/default.css" />
<link rel="stylesheet" href="milkbox3.0.3/css/main.css" />
<link rel="stylesheet" href="milkbox3.0.3/css/milkbox/milkbox.css.php" />
__________________________________________________________

In the body, If there was a title, I included a link to a detail page 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 title code, but you can use the HTML entity &quot; in it’s place. With that little fix,
the titles are clickable and lead you to a detail page for that image.

_____ code ________________________________________________


<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" style="border: 1px solid #ffffff" width="15%">
<div align="center">

<a href="<?php echo $upload['thumbUrlPath3'] ?>"data-milkbox="milkbox:g1" title="
<?php if ($record['title']): ?><a href=&quot;#&quot;><h2><?php echo $record['title'] ?><br /><?php echo $record['sub_title'] ?></h2></a><br
/><?php endif ?>

<?php if (!$record['title']): ?><a href=&quot;<?php echo $record['_link'] ?>&quot;><h2>Click for more.</h2></a><?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.

In main.css you'll find the values for:

Title Height and Color Properties
Thumbnail Border Size and Color Properties

To left justify the title text in Firefox 6, I added the following code to the h1, h2 properties in main.css:
_____ code ________________________________________________

alignment-adjust:auto;
__________________________________________________________

NOTE: To make the enlarged image overlay on a blank or black page, at bottom of page, in the domready function, make sure that
overlayOpacity:1 is included.

If there are other options, add that separated by a comma.

window.addEvent('domready', function(){
milkbox = new Milkbox({ centered:true, overlayOpacity:1 });

__________________________________________________________

NOTE: if you're going to change the enlarged image background color from white to something else (the property is in the
milkbox/css/milkbox.css.php file under #mbox-mainbox) you'll need to make the white background of the gifs transparent.

I've done that for play-pause.gif close.gif, prev.gif and next.gif and you can download them here

_____ url _ ________________________________________________

http://www.thecmsbcookbook/downloads/milkbox_gifs.zip
__________________________________________________________