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
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
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
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
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: [texascoffee] Display script intigration with CMS Builder
By gkornbluth - July 19, 2009 - edited: July 19, 2009
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]
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
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
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/