The CMSB Cookbook

USING DYNAMIC DRIVE IMAGE THUMBNAIL VIEWER II - Dec 29th, 2018


NOTE:
Since the concept of rollovers doesn't exist on tablets and smart phones, you might want to look at the recipe called 
DETECTING-MOBILE-PHONES-AND-TABLETS at: 
http://www.thecmsbcookbook.com/recipedetail.php?354
to switch to another image viewer format when those are detected.

Thanks to John Scheuer, the author of Dynamic Drive’s Thumbnail Viewer II, there’s a totally revised version for
2010 including the use of jquery.

You can learn more about the new version at: 

http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

and learn about some of the revisions that have been made at:

http://www.dynamicdrive.com/forums/showthread.php?t=32036

This recipe revision focuses on implementation of Thumbnail Viewer II in CMS Builder viewers.

You can download a version of the script including all revisions to date, and a sample viewer at:

http://www.thecmsbcookbook.com/downloads/thumbnailviewer2-2010.zip

As part of the revision process, John also included a number of “switches” that make implementation much easier.  
They include: 
trigger:'mouseover', (click) show enlarged image by clicking on a thumbnail
preload:'yes', (no) don't preload enlarged images
fx:'fade', (reveal (top to bottom) or none) changes the animation 
fxduration:500, (animation time in ms)
enabletitle:'yes', (no) hides titles
descriptiontop:'no', (yes) displays titles above enlarged image
hidetitle:'no'}, (yes) hides individual title
link: (optional) Adds links to your images (followed by the URL) Note: use complete URL’s

You can add a link to the enlarged image by adding it to the targetdiv code in you viewer. Just change this:

rev="targetdiv:loadarea">

to this:

rev="targetdiv:loadarea,link:http://www.your_site.com/artworkadetail.php?<php echo $record['num'] ?>">
or
rev="targetdiv:loadarea,link:http://www.yoursite.com<?php echo $record['_link'] ?>">

You can also override any of the default settings by adding the new value to the targetdiv.

rev="targetdiv:loadarea, descriptiontop:no'">

Which would show the titles at the bottom of the enlarged image no matter what the default was set to.

NOTE: The script doesn’t deal with linking the thumbnails, but there’s a fix below.

THE RECIPE
The example below assumes that you’ve created a multi-record editor with an upload field for the image called
“image” (thumbnail is the thumbnail image and thumbnail3 is the enlarged image) and a text field called “title”
for the image title, and that you’ve uploaded some sample records. The approach is similar for a single record editor
with multiple images in an upload field.

The sample viewer is coded to show six columns of thumbnails, to show the image titles at the top of the enlarged image,
to hide the title “tooltips” that appear over the thumbnails, to preload the images that will be utilized, and to
show the first image as the enlarged image on page load.

Once you’ve got the basic setup working, you can expand the fields to include any other information that you’d like
to appear in the title area or on the viewer.

THE CODE
At the top of your viewer, you’ll need to load the viewer_functions.php and load the records for your table, like this
(don’t forget to change the path and table name).

IF ALL OF YOUR IMAGES ARE IN UPLOAD FIELDS IN SEPARATE RECORDS (ONE UPLOADED IMAGE PER RECORD):

<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php

$libraryPath = 'cmsAdmin/lib/viewer_functions.php';
$dirsToCheck = array('/path_to_your_server/','','../','../../','../../../');
foreach ($dirsToCheck as $dir) { if (@include_once("$dir$libraryPath")) { break; }}
if (!function_exists('getRecords')) { die("Couldn't load viewer library, check filepath in sourcecode."); }

// load records
list($your_tableRecords, $your_tableMetaData) = getRecords(array(
'tableName' => 'your_table',
?>

));

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

AND IF ALL OF YOUR IMAGES ARE IN A SINGLE UPLOAD FIELD IN A SINGLE RECORD EDITOR:

<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php

require_once "path_to_your/cmsAdmin/lib/viewer_functions.php";

// load records
list($your_tableRecords, $your_tableMetaData) = getRecords(array(
'tableName' => 'your_table',
'where' => whereRecordNumberInUrl(1),
'limit' => '1',

));
$your_tableRecord = @$your_tableRecords[0]; // get first record
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

In the head of your viewers you’ll need to call the jquery and the js, like this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="Scripts/thumbnailviewer2010-1.js"></script>

If you want to make the thumbnails clickable, you’ll also need to add this script to the head of your viewer below the
thumbnailviewer2010-1.js call:

<script type="text/javascript">
jQuery(function($){
$('a[rel=enlargeimage]').click(function(e){
e.preventDefault();
var rev = $(this).attr('rev').split(','), link;
$.each(rev, function(){
if($.trim(this).indexOf('link') === 0){
location.href = this.substring(5);
}
});
});
});
</script>

Then in the body of the viewer where you want the thumbnails to be displayed:

(Note the use of " to replace quotation marks).

John suggested that you might want to use a full URL in the targetdiv link (ie:
rev="targetdiv:loadarea,link:http://www.yoursite.com<?php echo $record['_link'] ?>">) for some browsers, but I didn’t
need it for IE 7 & 8, FireFox 3+, Safari, or Chrome.

IF ALL OF YOUR IMAGES ARE IN UPLOAD FIELDS IN SEPARATE RECORDS (ONE UPLOADED IMAGE PER RECORD):

<table cellpadding="5">
<tr>
<?php foreach ($your_tableRecords as $record): ?>
<?php foreach ($record['image'] as $upload): ?>
<td width="50%" align="center" valign="top" >
<a title="<span class="your_css_class"><?php echo $record['title']; ?><br /></span>"href="<?php echo
$upload['thumbUrlPath3'] ?>"rel="enlargeimage" rev="targetdiv:loadarea,link:<?php echo $record['_link'] ?>">
<img src="<?php echo $upload['thumbUrlPath'] ?>" alt="" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo
$upload['thumbHeight']?>" border="0" style="margin-bottom: 5px" /> </a>

<br />

<div valign="bottom" align="left" ></div>
<?php $maxCols=6; if (@++$count % $maxCols == 0): ?>
</tr>
<tr>
<?php endif; ?>
<?php endforeach ?>
<?php endforeach; ?>

</tr>
</table>

And where you want to display the enlarged image:

<div align="center" id="loadarea" style="width: 450px; height: 600px;">

<!– this code displays the first image on page load –>
<?php foreach ($your_tableRecords as $record): ?>
<?php foreach ($record['image'] as $upload): ?>
<span class="your_css_class"><?php echo $record['your_title_field'] ?></span>
<br /> <br /> <a href="<?php echo $record['_link'] ?>"><img src="<?php echo $upload['thumbUrlPath3'] ?>" alt=""
border="0" /></a><?php break; ?><?php endforeach ?><?php break; ?>

<?php endforeach ?></div>

AND IF ALL OF YOUR IMAGES ARE IN A SINGLE UPLOAD FIELD IN A MULTI RECORD EDITOR:

In this part of the recipe, I've added the ability to define the maximum amount of columns and images per page of
thumbnails.

So, at the top of your viewer:

<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php

$libraryPath = 'cmsAdmin/lib/viewer_functions.php';
$dirsToCheck = array('/path_to_your_server/','','../','../../','../../../');
foreach ($dirsToCheck as $dir) { if (@include_once("$dir$libraryPath")) { break; }}
if (!function_exists('getRecords')) { die("Couldn't load viewer library, check filepath in sourcecode."); }

list($photo_galleriesRecords, $photo_galleriesMetaData) = getRecords(array(
'tableName' => 'photo_galleries',
'where' => whereRecordNumberInUrl(0),
'loadUploads' => true,
'allowSearch' => false,
'limit' => '1',
));
$photo_galleriesRecord = @$photo_galleriesRecords[0]; // get first record

?>

<table align="center" width="60%" border="0" cellpadding="5">
<tr>
<td colspan="2"><br />
<p align="center" ><span class="page_title_font"><?php echo strtoupper($photo_galleriesRecord['title'])
?></span></p>
<p align="center"><span class="page_sub_title_font"><?php echo $photo_galleriesRecord['sub_title'] ?></span></p>
<p align="left"><span class="text_font"><?php echo $photo_galleriesRecord['description'] ?></span></p></td>
</tr>
</table>
<table width="975" border="0" align="center" cellpadding="5">
<tr>
<td width="474" valign="top"><div align="center"><br />
<?php if ($photo_galleriesRecord['images']): ?>
<span class="page_sub_title_font"> Click/Tap for a Larger Image</span>
<?php endif ?>
<br />
<br />
</div></td>
</tr>
</table>
<table width="950" border="0" align="center">
<tr>
<td valign="top"><?php
$photosPerPage = 15; // Change this to change the number of images per page
$photoPage = @$_REQUEST['photoPage'] ? $_REQUEST['photoPage'] - 1 : 0;
$firstIndex = $photoPage * $photosPerPage;
$lastIndex = min($firstIndex + $photosPerPage, sizeof($photo_galleriesRecord['images'])) - 1;
?>
<?php if ((ceil(sizeof($photo_galleriesRecord['images']) / $photosPerPage)) > 1): ?>
<form action="?num=<?php echo $photo_galleriesRecord['num'] ?>" method="post">
<?php if ($firstIndex > 0): ?>
<a href="?photoPage=<?php echo $photoPage; ?>&=<?php echo $photo_galleriesRecord['num'] ?>"><span
class="text_font">Click/Tap For Previous Page</span></a>   
<?php endif ?>
<span class="text_font">Page
<input type="text" name="photoPage" value="<?php echo($photoPage + 1); ?>" class="text_font" style="width:
10px;" />
of <?php echo(ceil(sizeof($photo_galleriesRecord['images']) / $photosPerPage)); ?></span>
<?php if ($lastIndex < sizeof($photo_galleriesRecord['images']) - 1): ?>
<input type="submit" value="" />
<a href="?photoPage=<?php echo $photoPage+2; ?>&=<?php echo $photo_galleriesRecord['num'] ?>"><span
class="text_font">Click/Tap For Next Page</span></a><br />
<?php endif ?>
</form>
<?php endif ?>
<br />
<table border="0" cellspacing="3" cellpadding="3">
<tr>
<?php

if ($firstIndex > sizeof($photo_galleriesRecord['images'])-1 || $firstIndex < 0) { $firstIndex = 0; $photoPage = 0; }

foreach (range($firstIndex, $lastIndex) as $photoIndex):
@$upload = $photo_galleriesRecord['images'][$photoIndex]
?>
<td align="center" valign="middle"><a title="<span class="text_font"><br /> <?php echo
htmlspecialchars($upload['info1']); ?> <?php echo htmlspecialchars($upload['info2']); ?> <?php echo
htmlspecialchars($upload['info3']); ?><br /> </span>" href="<?php echo $upload['thumbUrlPath4'] ?>"

rel="enlargeimage" rev="targetdiv:loadarea," > <img src="<?php echo $upload['thumbUrlPath'] ?>" alt="" width="<?php echo
$upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight']?>" border="0" style="margin: 5px" /> </a></td>
<?PHP $col = 4 // change this to change the number of thumbnail columns ?>
<?php $maxCols=$col; if (@++$count % $maxCols == 0): ?>
</tr>
<tr>
<?php endif; ?>
<?php endforeach ?>
</tr>
</table>
</td>
</tr>
</table>

And where you want to display the enlarged image:

<table border="0" cellpadding="5" cellspacing="0" width="25%">
<tr>
<td align="left" valign="top" ><div align="left">
<div align="center" id="loadarea" style="width: 650px; height: 500px;">
<?php $upload = @$photo_galleriesRecord['images'][$firstIndex] ?>
<span class="text_font"><br />
<?php echo htmlspecialchars($upload['info1']); ?> <?php echo htmlspecialchars($upload['info2']); ?> <?php
echo htmlspecialchars($upload['info3']); ?></span> <br />

<img src="<?php echo $upload['thumbUrlPath4'] ?>" alt="" border="0" /> <br />
</div></td>
</tr>
</table>

THE INFORMATION BELOW RELATES TO OLDER VERSIONS OF THE THUMBNAIL VIEWER

This interesting viewer’s instruction and example page is at:

http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

Their forum is at:

http://www.dynamicdrive.com/forums/forumdisplay.php?f=2

Just search for Thumbnail Viewer II

And you can download both the original and a revised version of the thumbnailviewer2.js here:

http://www.thecmsbcookbook.com/downloads/thumbnailviewer2.zip

You can easily integrate the viewer with CMSB by using a single record - multi image upload ( I called the record
“photography” and the upload field “images”

I set up the input validation parameters as follows:

file extensions allowed (I limited mine to jpg for this application)
maximum uploads: 27 ( In my page layout I wanted to limit thumbnails to 9 rows of 3 columns)
Max upload size (Up to you, I limit images to 1000 KB)
Image resize: (My choice 600 pixels wide x 800 pixels high)
Thumbnail 1: (100 x 100 to fit the format of my thumbnail page)
Thumbnail 2: (500 x 450 to fit the format of my single image details page)
Thumbnail 3: (I didn’t use it but you can)

CMSB allows for 5 “info” fields for each uploaded image and I decided to use info1 as the Title of the image, and
info2" as the border style for the image (using the complete Border: style="border: 1px solid #000000" code)

Here’s the basic html version of the code needed for the Image Thumbnail Viewer, which would be inserted in each table
cell where a thumbnail was to appear.

(The enlarged images and thumbnails would have to be created externally and then uploaded to specific locations on your
server)

<div align="center">
<a href="http://www.yoursite.com/images/325/TR_orig_002.jpg" class="Image-Labels"
title="the optional title you want to appear under the enlarged image"
rel="enlargeimage::mouseover"
rev="loadarea" ><img border="0" src="http://www.yoursite.com/images/75/TR_orig_002.jpg"
width="75" height="115" style="margin-bottom: 5px" /></a>
<br />
<span class="Small-Text"><a href="Bodyprint2.php">Learn More</a></span></div>

Where you want the enlarged image to appear, you’d use the following code:

<div id="loadarea" class="Image-Labels" style="width: 500px; height: 450px;"> </div>

HERE’S THE CMSB IMPLEMENTATION OF THE SAME CODE:

(The $maxCols=3 is what determines the number of columns before a new row is created.)

<table>
<tr>
<?php foreach ($photographyRecords as $record): ?>
<?php foreach ($record['image'] as $upload): ?>

<td align="center" valign="bottom" <?PHP echo $record['title'] ?> width="25%">
<a href="<?PHP echo $upload['thumbUrlPath2'] ?>" class="Image-Labels" title=”<?PHP echo $upload['info1'] ?>”

rel="enlargeimage::mouseover"

rev="loadarea" >

<img src="<?PHP echo $upload['thumbUrlPath'] ?>" border="0" width="<?PHP echo $upload['thumbWidth'] ?>" height="<?PHP
echo $upload['thumbHeight']?>" style="margin-bottom: 5px" />

</a>

<br /><div valign="bottom" align="center"><a href="<?PHP echo $upload['_link'] ?>">Learn More</a></div>

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

Where you want the enlarged image to appear, you’d use the following code:

<div align="center" id="loadarea" class="Image-Labels" style="width: 500px; height: 450px;">

<?php foreach ($photographyRecords as $record): ?>
<?php foreach ($record['image'] as $upload): ?>
<img src="<?php echo $upload['thumbUrlPath2'] ?>" alt="" border="0" /><br /><br /><span
class="medium-bold"><?php echo $record['title'] ?></span><br /><span class="medium"><?php echo $record['size_of_work']
?></span><br />
<br /><?php break; ?><?php endforeach ?><?php break; ?>

<?php endforeach ?></div>

KEEPING TOOLTIPS FROM POPPING UP AND OBSCURING YOUR THUMBNAILS

The problem with the above code is that when you hover over a thumbnail, a tooltip will pop up with all of your title
code, obscuring some of your thumbnails and confusing the visitor.

The tooltip gets it’s value from the image tag title=”your_title”, so in order to not see the tooltip, you’ll
have to use another attribute to pass your label information.

To allow this, in the thumbnailviewer2.js file, search for:

var description=(thumbnailviewer2.enableTitle && linkobj.getAttribute("title"))? linkobj.getAttribute("title") : ""
//Get title attr

And replace that line with:

var description=linkobj.rel.split('::')[2]? linkobj.rel.split('::')[2] : "";

Or you can download the revised script from the link at the top of this recipe.

This revision will allow you to piggyback onto the rel attribute and skip using the “title” tag.

<table cellpadding="5">
<tr>
<?php foreach ($photographyRecords as $record): ?>
<?php foreach ($record['image'] as $upload): ?>
<td width="50%" align="left" valign="top" >
<a href="#" name="<?php echo $upload['thumbUrlPath2'] ?>"

rel="enlargeimage::mouseover::<br /><?php $title = htmlspecialchars($record['title']); ?><span
class="medium-bold"><?php echo ($title); ?></span><br /><?php $size_of_work =
htmlspecialchars($record['size_of_work']); ?><span class="medium"><?php echo ($size_of_work);
?></span></span>"

rev="loadarea" > <img src="<?php echo $upload['thumbUrlPath'] ?>" alt="" width="<?php echo $upload['thumbWidth'] ?>"
height="<?php echo $upload['thumbHeight']?>" border="0" style="margin-bottom: 5px" /> </a>

<br />

<div valign="bottom" align="left" ></div>
<?php $maxCols=3; if (@++$count % $maxCols == 0): ?> </tr>
<tr>
<?php endif; ?>
<?PHP break ?><?php endforeach ?>
<?php endforeach; ?>
</tr>
</table>

The same loadarea Div code would still be used.

The htmlspecialchar operator allows you to use double quotes and probably other special characters in your titles
without breaking the code. So text like 12" x 14" would not cause problems.

Note that you still have to use escape characters " for other tags like class="your_class"

IF YOU WANT THE FIRST ENLARGED IMAGE TO AUTOMATICALLY DISPLAY IN THE LOADAREA, JUST USE THIS CODE IN THE ENLARGED IMAGE
DISPLAY DIV

<div id="loadarea" class="Image-Labels" style="width: 400px; height: 500px;">

<?php foreach ($photographyRecord['images'] as $upload): ?>

<img src="<?php echo $upload['urlPath'] ?>" alt="" border="0" />

<?php break; ?><?php endforeach ?></div>

IF YOU’RE USING A MULTI RECORD EDITOR YOU’D HAVE TO CHANGE THE FOREACH LOOPS TO ACCOMMODATE THAT IN BOTH CODE BLOCKS

<table>
<tr>
<?php foreach ($photographyRecords as $record): ?><?php foreach ($record['images'] as $upload): ?>
<td align="center" valign="bottom" <?php echo $upload['info2'] ?> width="25%">
<a href="<?php echo $upload['thumbUrlPath2'] ?>" class="Image-Labels"
rel="enlargeimage::mouseover:::<br><?php echo $upload['info1'] ?>" rev="loadarea" >

<img src="<?php echo $upload['thumbUrlPath'] ?>" border="0" width="<?php echo
$upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight']?>" style="margin-bottom: 5px" /></a>
<br /><div valign="bottom" align="center" ><a href="<?php echo $record['_link'] ?>">Learn<br />More</a></div>

<?php $maxCols=3; if (@++$count % $maxCols == 0): ?></tr><tr><?php endif; ?>

<?php endforeach ?> <?php endforeach; ?>

</table>

AND

<div id="loadarea" class="Image-Labels" style="width: 400px; height: 500px;">
<?php foreach ($photographyRecords as $record): ?>
<?php foreach ($record['images'] as $upload): ?>

<img src="<?php echo $upload['urlPath'] ?>" alt="" border="0" />

<?php endforeach ?><?php break; ?><?php endforeach ?>
</div>

MAKING THE LOADAREA IMAGE A LIVE LINK TO YOUR DETAIL PAGE

If you want your loadarea image (the large image) to be a live link to your detail page, it’s pretty simple.

In the loadarea <div> Replace the indicated code:

<?php foreach ($photographyRecords as $record): ?>
<?php foreach ($record['image'] as $upload): ?>

<img src="<?php echo $upload['urlPath'] ?>" alt="" border="0" />

<?php endforeach ?><?php break; ?><?php endforeach ?></div>

With this:

<?php foreach ($photographyRecords as $record): ?>
<?php foreach ($record['image'] as $upload): ?>

<a href="http://www.your_site.com/Your_detail_page.php?<?php echo $record['num'] ?>"><img src="<?php echo
$upload['urlPath'] ?>" alt="" border="0" /></a>

<?php endforeach ?><?php break; ?><?php endforeach ?></div>

MAKING THE THUMBNAILS CLICKABLE AS WELL
This one was a little harder to figure out. It turns out that it required some changes to the thumbnailviewer2.js file.
You can download it from:

http://www.thecmsbcookbook.com/downloads/thumbnailviewer2revised.zip

Once I found the revised thumbnailviewer2.js it was again pretty simple to implement the changes.

In the Thumbnail code:

<?php foreach ($photographyRecords as $record): ?>
<?php foreach ($record['image'] as $upload): ?>
<td width="50%" align="center" valign="top" <?php echo $upload['info2'] ?>

<a href="<?php echo $upload['thumbUrlPath2'] ?>"

rel="enlargeimage::mouseover::

Replace the indicated code with this code:

<?php foreach ($photographyRecords as $record): ?>
<?php foreach ($record['image'] as $upload): ?>
<td width="50%" align="center" valign="top" >

<a href="<?php echo $record['_link'] ?>" name="<?php echo $upload['thumbUrlPath2'] ?>""

rel="enlargeimage::mouseover::

That’s it, let your clients click away.

ADDING A SECOND THUMBNAIL VIEWER TO YOUR DETAIL PAGE
I had a client who wanted to add alternate views of their artwork to the detail page for that work.

Adding the thumbnail viewer to the detail page was pretty straightforward. The biggest issue was to add <?php break; ?>
code to the list page and the detail page to keep from seeing a number of extra images. Here’s how I did it.

On the first thumbnail viewer page I added a second <?php break; ?> to the loadarea just before the <?php endforeach ?>
like this:

<div id="loadarea" class="Image-Labels" style="width: 400px; height: 500px;">
<?php foreach ($photographyRecords as $record): ?<
<?php foreach ($record['images'] as $upload): ?>

<img src="<?php echo $upload['urlPath'] ?>" alt="" border="0" />

<?php break; ?><?php endforeach ?><?php break; ?><?php endforeach ?>
</div>

and I added one <?php break; ?> in the loadarea of the second thumbnail viewer like this:

<div id="loadarea" class="Image-Labels" style="width: 400px; height: 500px;">
<?php foreach ($photographyRecords as $record): ?<
<?php foreach ($record['images'] as $upload): ?>

<img src="<?php echo $upload['urlPath'] ?>" alt="" border="0" />

<?php break; ?><?php endforeach ?><?php endforeach ?>
</div>

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.