Image Swaps Using Thumbnails
4 posts by 2 authors in: Forums > CMS Builder
Last Post: September 27, 2012 (RSS)
I need to figure out a couple things on basic image swaps...
I looped the thumbnails below the main image.
Im using the first thumbnail for the main image. Im using the thumbnail 3 for the small thumbnails.
At present I have set this to just do swaps on mouseovers but will change it to onclicks once I get it working
The page this located is here http://2tinker.com.r15.millsys.org/products.php?3
I'm not sure what I did wrong.
Thanks in advance,
Michael
I looped the thumbnails below the main image.
Im using the first thumbnail for the main image. Im using the thumbnail 3 for the small thumbnails.
At present I have set this to just do swaps on mouseovers but will change it to onclicks once I get it working
The page this located is here http://2tinker.com.r15.millsys.org/products.php?3
I'm not sure what I did wrong.
Thanks in advance,
Michael
<body onload="MM_preloadImages('<?php echo $upload['thumbUrlPath'] ?>')">
<div class="left">
<div class="image">
<div class="product_outside_border">
<div class="product_outside">
<div class="product_inside">
<div class="image"><?php foreach ($productsRecord['images'] as $index => $upload): ?>
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" id="<?php echo htmlencode($upload['num']) ?>" alt="" /><?php break; ?>
<?php endforeach ?>
</div>
</div>
</div>
</div><!-- << product outside border >> -->
</div><!-- << image >> -->
<div class="image-additional">
<?php foreach ($productsRecord['images'] as $index => $upload): ?><div class="image">
<div class="product_outside_border">
<div class="product_outside">
<div class="product_inside">
<img src="<?php echo $upload['thumbUrlPath3'] ?>" alt="" width="<?php echo $upload['thumbWidth3'] ?>" height="<?php echo $upload['thumbHeight3'] ?>" id="<?php echo $upload['num'] ?>" onclick="MM_swapImage('] ?>','','<?php echo $upload['thumbUrlPath'] ?>',1)" />
</div>
</div>
</div><!-- << product outside border >> -->
</div><!-- << image >> --><?php endforeach ?>
</div><!-- << image additional >> -->
</div>
Michael Moyers
Owner of Just Rite Design Inc. A growing network of professionals in web design, graphic design, flash development, programming, and audio & video productions.
"Due to budget constraints, the Light at the end of the tunnel will be temporarily out!"
Owner of Just Rite Design Inc. A growing network of professionals in web design, graphic design, flash development, programming, and audio & video productions.
"Due to budget constraints, the Light at the end of the tunnel will be temporarily out!"
Re: [justritedesign] Image Swaps Using Thumbnails
Hi Michael,
When I look at your source code, it says:
Try replacing the preload images with the following which is an excerpt from a recipe in my CMSB Cookbook http://www.thecmsbcookbook.com
For a multi record editor on a list page, you’d insert this into the opening <body> tag
(The call to blank.jpg adjusts the syntax of the commas between entries.)
For a single record editor or a detail page the code would be:
(Note: If you’re adding a series of roll over images to some you already have, just add their calls to the end of the existing preload
list)
Then, for the image swap you might try one of my favorites, Thumbnail Viewer II from Dynamic Drive http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm
Implementation in CMSB is pretty simple and to make installation super easy there’s a recipe with lots of information in the Cookbook.
Hope that helps,
Jerry Kornbluth
When I look at your source code, it says:
<body onload="MM_preloadImages('
Notice: Undefined variable: upload in D:\HostingSpaces\2tinker\2tinker.com\wwwroot\products.php on line 79
')">Try replacing the preload images with the following which is an excerpt from a recipe in my CMSB Cookbook http://www.thecmsbcookbook.com
For a multi record editor on a list page, you’d insert this into the opening <body> tag
<body onload="MM_preloadImages('<?php foreach ($your_tableRecords as $record): ?><?php foreach ($record['your_roll_over_image_field'] as
$upload): ?>’<?php echo $upload['thumbUrlPath'] ?>’, <?php endforeach; ?><?php endforeach; ?>’blank.jpg’)">(The call to blank.jpg adjusts the syntax of the commas between entries.)
For a single record editor or a detail page the code would be:
<body onload="MM_preloadImages(<?php foreach ($your_tableRecord['your_rollover_image_field'] as $upload): ?>’<?php echo
$upload['thumbUrlPath'] ?>’, <?php endforeach; ?>’blank.jpg’)">(Note: If you’re adding a series of roll over images to some you already have, just add their calls to the end of the existing preload
list)
Then, for the image swap you might try one of my favorites, Thumbnail Viewer II from Dynamic Drive http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm
Implementation in CMSB is pretty simple and to make installation super easy there’s a recipe with lots of information in the Cookbook.
Hope that helps,
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
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php
Re: [gkornbluth] Image Swaps Using Thumbnails
OK the preloads are working now.
But the swaps are not taking place. Any ideas?
<body onload="MM_preloadImages(<?php foreach ($productsRecord['images'] as $upload): ?>’<?php echo
$upload['thumbUrlPath3'] ?>’,’<?php echo $upload['thumbUrlPath'] ?>’, <?php endforeach; ?>’blank.jpg’)">But the swaps are not taking place. Any ideas?
Michael Moyers
Owner of Just Rite Design Inc. A growing network of professionals in web design, graphic design, flash development, programming, and audio & video productions.
"Due to budget constraints, the Light at the end of the tunnel will be temporarily out!"
Owner of Just Rite Design Inc. A growing network of professionals in web design, graphic design, flash development, programming, and audio & video productions.
"Due to budget constraints, the Light at the end of the tunnel will be temporarily out!"
Re: [justritedesign] Image Swaps Using Thumbnails
Hi Michael,
As I suggested, check out the Thumbnail viewer II and see if that works for you.
It allows you to rollover any thumbnails and view an enlarged image. You can also use thumbnails per page code to limit the amount of thumbnails shown at one time.
This is documented in recipes in the CMSB Cookbook as well.
It's a pretty cool app with lots of easy to configure options for titles, links, etc.
Best,
Jerry Kornbluth
As I suggested, check out the Thumbnail viewer II and see if that works for you.
It allows you to rollover any thumbnails and view an enlarged image. You can also use thumbnails per page code to limit the amount of thumbnails shown at one time.
This is documented in recipes in the CMSB Cookbook as well.
It's a pretty cool app with lots of easy to configure options for titles, links, etc.
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
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php