Display script intigration with CMS Builder

6 posts by 3 authors in: Forums > CMS Builder
Last Post: July 20, 2009   (RSS)

By texascoffee - July 18, 2009

Hi all,

I am about finished with the site but can't go live until I solve a display problem with Image Thumbnail Viewer II (a free display script from www.dynamicdrive.com).

The script takes thumbs and enlarges them dynamically with a mouseover event. My problem is, I can't figure out how to render the first 'large' image on page load. Basically, the page loads with a large empty white chunk missing until the user mouses over the thumbs on the right (can be seen here on my testing server http://creativetoybox.com/cmsAdmin/listingDetail.php?Lewisville-3).

I found a successful CMSBuilder site implementation of this script here: http://www.canadaforsale.ca/listingDetail.php/3344-2nd-Street-6/

Any ideas how to kick the first image out? Has anybody else used this neat little script for CMSBuilder?

I have sent an email to the canadaforsale site developer above, and posted on the dynamicdrive forum. However, this script is from 2007 and I don't think I will get much support in that direction.

Thanks in advance for any help!

Re: [texascoffee] Display script intigration with CMS Builder

By gkornbluth - July 19, 2009

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
The first CMS Builder reference book is now available on-line!

Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

Re: [gkornbluth] Display script intigration with CMS Builder

By texascoffee - July 19, 2009

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?

Re: [gkornbluth] Display script intigration with CMS Builder

By texascoffee - July 19, 2009

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.

Re: [gkornbluth] Display script intigration with CMS Builder

By ross - July 20, 2009

Hi Jerry

Looks like you got this one going! I really appreciate you jumping in to help out :).
-----------------------------------------------------------
Cheers,
Ross Fairbairn - Consulting
consulting@interactivetools.com

Hire me! Save time by getting our experts to help with your project.
Template changes, advanced features, full integration, whatever you
need. Whether you need one hour or fifty, get it done fast with
Priority Consulting: http://www.interactivetools.com/consulting/