Display script intigration with CMS Builder

Here's some viewer code that I've used that mi get you going in the right direction.

The code has been modified from the original viewer so that the default title “tooltip” that appears when you roll over the thumbnails does not show and obscure the thumbnails.

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

<table><tr>
<?PHP foreach ($photographyRecord['images'] as $upload): ?><td align="center" valign="bottom" <?PHP echo $upload['info2'] ?> width="25%">
<?PHP if ($upload['isImage']): ?>
<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>
<?PHP else: ?>
<a href="<?PHP echo $upload['urlPath'] ?>">Download <?PHP echo $upload['filename'] ?></a></td>
<?PHP endif; ?>
<br /><div valign="bottom" align="center"><a href="<?PHP echo $upload['info3'] ?>">Learn More</a></div>

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

You’d use the following code where you want the enlarged image to appear on your page:

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


Best,

Jerry Kornbluth

Thanks for the fast reply!

Here is an example of you code (modified to fit my images) on my testing server: http://creativetoybox.com/cmsAdmin/listingDetail.php?Lewisville-3

I like using php instead of javascript and the thumbnail images are better spaced/displayed. You rock, thank you! However, the same issue that I was having before.. there is no "placeholder" image for the large, empty white space when the page initially loads. You have to mouse over one of the thumbs to bring an image into the listing detail page.

Can you think of a way to automatically display the first thumb on page load?

Found this that might be helpful.

http://www.999shoe.cn/forums/showthread.php?t=27037

And this

http://www.dynamicdrive.com/forums/archive/index.php/t-8291.html

(about half way down in the thread)

When you get it working, could you let me know how it turns out and exactly what code you added where. I'd like to add the information to the Image Thumbnail Viewer section of the Cookbook and to some of my own sites.

Thanks,

Jerry Kornbluth[url]

I got it to work! It was much simpler than I thought it would be. Here is the page on my test server: http://creativetoybox.com/cmsAdmin/listingDetail.php?Lewisville-3

Here are the two bits of code I used on the page:

<div id="loadarea" class="Image-Labels" style="width: 500px; height: 375px;">
<?php foreach ($listingsRecord['uploads'] as $upload): ?>
<?PHP if ($upload['isImage']): ?>
<img src="<?php echo $upload['urlPath'] ?>" alt="" border="0" />
<?php break ?>
<?php endif ?>
<?php endforeach ?>
</div>

and

<div align="center">
<table><tr> <?PHP foreach ($listingsRecord['uploads'] as $upload): ?><td align="center" valign="bottom" <?PHP echo $upload['info2'] ?> > <?PHP if ($upload['isImage']): ?> <a href="<?php echo $upload['urlPath'] ?>" class="Image-Labels" rel="enlargeimage::mouseover::<br><?PHP echo $upload['info1'] ?>" rev="loadarea" > <img src="<?PHP echo $upload['thumbUrlPath2'] ?>" border="0" width="<?PHP echo $upload['thumbWidth2'] ?>" height="<?PHP echo $upload['thumbHeight2']?>" style="margin-bottom: 5px" /></a> </td> <?PHP endif; ?><?PHP $maxCols=3; if (@++$count % $maxCols == 0): ?></tr><tr><?PHP endif; ?><?PHP endforeach ?></table>
</div>

I adjusted the upload params in the CMSAdmin section to fit the load area (500x375). Also, I am using thumb (150x150) for the listing page and thumb2 (80x60) for the listing detail page. Everything else should be easy to adjust to your site. Finally, I did not have to use any JS code. This is all PHP and is delivered to the page fast and clean.

Hi Jerry

Looks like you got this one going! I really appreciate you jumping in to help out :).