SETTING UP LIGHTBOX OR MILKBOX TO SHOW IMAGES ON A DETAIL PAGE - Dec 29th, 2018


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 fir 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.


<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.


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

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:

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



The materials on this web site have been created for use with CMS Builder content management software. CMS Builder software is published and licensed for use by InteractiveTools.com. Please contact Interactive Tools for information on the downloading of the software or the purchasing of licenses.


Terms of Service