Display script intigration with CMS Builder

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

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: [texascoffee] Display script intigration with CMS Builder

By gkornbluth - July 19, 2009 - edited: July 19, 2009

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

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/