Image gallery using jQuery
7 posts by 4 authors in: Forums > CMS Builder
Last Post: March 4, 2011 (RSS)
I've got a little gallery working in HTML but am wondering how I would be able to get it to work when using CMS Builder. The jQuery crops the image to create a thumbnail and displays the large image on click of the thumbnail but it uses the 'div id, and number of images' in the bit of code:
<div class="photos">
<div id="photo_1"><img src="images/leeds_castle_1.jpg" width="640" height="355" border="0" /></div>
<div id="photo_2" style="display:none;"><img src="images/leeds_castle_2.jpg" alt="" /></div>
<div id="photo_3" style="display:none;"><img src="images/leeds_castle_3.jpg" alt="" /></div>
<ul class="thumbs">
<li><a href="javascript:void(0)" onClick="switch_product_img('photo_1', 3);"><img src="images/leeds_castle_1.jpg" /></a></li>
<li><a href="javascript:void(0)" onClick="switch_product_img('photo_2', 3);"><img src="images/leeds_castle_2.jpg" alt="" /></a></li>
<li><a href="javascript:void(0)" onClick="switch_product_img('photo_3', 3);"><img src="images/leeds_castle_3.jpg" alt="" width="340" height="355" /></a></li>
</ul>
Any ideas how the CMS code would be implemented and how we could get it to work for a varying number of images (the client needs flexibility to add in as many images as needed)? Thanks in advance!
<div class="photos">
<div id="photo_1"><img src="images/leeds_castle_1.jpg" width="640" height="355" border="0" /></div>
<div id="photo_2" style="display:none;"><img src="images/leeds_castle_2.jpg" alt="" /></div>
<div id="photo_3" style="display:none;"><img src="images/leeds_castle_3.jpg" alt="" /></div>
<ul class="thumbs">
<li><a href="javascript:void(0)" onClick="switch_product_img('photo_1', 3);"><img src="images/leeds_castle_1.jpg" /></a></li>
<li><a href="javascript:void(0)" onClick="switch_product_img('photo_2', 3);"><img src="images/leeds_castle_2.jpg" alt="" /></a></li>
<li><a href="javascript:void(0)" onClick="switch_product_img('photo_3', 3);"><img src="images/leeds_castle_3.jpg" alt="" width="340" height="355" /></a></li>
</ul>
Any ideas how the CMS code would be implemented and how we could get it to work for a varying number of images (the client needs flexibility to add in as many images as needed)? Thanks in advance!
Re: [Kittybiccy] Image gallery using jQuery
Hi,
I'm assuming that a simple multirecord editor with image uploads and detail pages won't work for some reason.
Have you tried something like Thumbnail Viewer II from DynamicDrive?
You can see an implementation of it at http://www.susansaladino.com/portfolio.php
Both approaches can handle an unlimited number of images. They can be set up to display only a certain number of thumbs on a given page with next and previous page links.
There's lots of information on both approaches in my CMSB Cookbook
Best,
Jerry Kornbluth
I'm assuming that a simple multirecord editor with image uploads and detail pages won't work for some reason.
Have you tried something like Thumbnail Viewer II from DynamicDrive?
You can see an implementation of it at http://www.susansaladino.com/portfolio.php
Both approaches can handle an unlimited number of images. They can be set up to display only a certain number of thumbs on a given page with next and previous page links.
There's lots of information on both approaches in my CMSB Cookbook
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
Re: [gkornbluth] Image gallery using jQuery
Hi Jerry,
The page itself will be one of many detail pages with an upload field. The main reason I wanted to use that bit of jQuery was because of how it uses the large image to create the thumbnail using CSS to hide the overflow. Does the one you mention do similar? I just don't like using the CMSBuilder to create thumbnails as these end up different proportions!
Thanks!
The page itself will be one of many detail pages with an upload field. The main reason I wanted to use that bit of jQuery was because of how it uses the large image to create the thumbnail using CSS to hide the overflow. Does the one you mention do similar? I just don't like using the CMSBuilder to create thumbnails as these end up different proportions!
Thanks!
Re: [Kittybiccy] Image gallery using jQuery
Hi,
When CMS creates thumbnails, you set up the parameters for max W and max H (up to 4 sets of sizes in all). If you want the thumbs to all be the same H and W you'd have to start off with identical aspect ratios for the larger ones.
Otherwise, all crop algorithms, including the jQuery one used by CMSB, do not change the aspect ratio but shrink the longest side of the image to the pixel size that you've set.
All the examples use thumbs created in CMSB.
Did you look at the sample page that I mentioned?
Jerry
When CMS creates thumbnails, you set up the parameters for max W and max H (up to 4 sets of sizes in all). If you want the thumbs to all be the same H and W you'd have to start off with identical aspect ratios for the larger ones.
Otherwise, all crop algorithms, including the jQuery one used by CMSB, do not change the aspect ratio but shrink the longest side of the image to the pixel size that you've set.
All the examples use thumbs created in CMSB.
Did you look at the sample page that I mentioned?
Jerry
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: [Kittybiccy] Image gallery using jQuery
By Jason - January 21, 2011
Hi,
So what you need to do is to output all of the images you have for a given record in two places, once in a set of divs, second in a ul list. Is that right?
Here's an example of how you can do it. In this example, we'll assuming your using a variable called $record which is the current record you're outputting and that your section has a field called "photos" which is where you uploaded your images:
First we'll initialize a counter so we can give each image a unique id and we'll start our photos div
We'll then loop thorough all of the images and output them in their individual divs. Any image outputted after the first image will have style = "display:none;"
Finally we'll output our list again in our <ul>. I'm not sure about the exact script your using, but the second argument in the function switch_product_img() is always 3, which I'm assuming is the number of the last image. Which is what we'll use:
Please note that since I don't have your actual script, this code hasn't been fully tested. It should get you started though.
Hope this helps
So what you need to do is to output all of the images you have for a given record in two places, once in a set of divs, second in a ul list. Is that right?
Here's an example of how you can do it. In this example, we'll assuming your using a variable called $record which is the current record you're outputting and that your section has a field called "photos" which is where you uploaded your images:
First we'll initialize a counter so we can give each image a unique id and we'll start our photos div
<div class="photos">
<?php $photoCounter = 0;?>We'll then loop thorough all of the images and output them in their individual divs. Any image outputted after the first image will have style = "display:none;"
<?php foreach ($record['photos'] as $photo): ?>
<div id="photo_<?php echo ++$photoCounter;?>" <?php if($photoCounter > 1){echo " style ='display:none' ";}?>>
<img src="<?php echo $photo['urlPath'];?>" height="<?php echo $photo['height'];?>" width="<?php echo $photo['width'];?>" />
</div>
<?php endforeach ?>Finally we'll output our list again in our <ul>. I'm not sure about the exact script your using, but the second argument in the function switch_product_img() is always 3, which I'm assuming is the number of the last image. Which is what we'll use:
<ul class="thumbs">
<?php $lastImageNumber = count($record['photo']);
$photoCounter = 0;
?>
<?php foreach($record['photo'] as $photo): ?>
<li><a href="javascript:void(0)" onClick="switch_product_img('photo_<?php echo ++$photoCounter;?>', <?php echo $lastImageNumber;?>);"><img src="<?php echo $photo['urlPath'];?>" alt="" <?php if ($pageCounter==$lastImageNumber):?> width="340" height="355" <?php endif ?>/></a></li>
<?php endforeach ?>
</ul>Please note that since I don't have your actual script, this code hasn't been fully tested. It should get you started though.
Hope this helps
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
Jason Sauchuk - Project Manager
interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
Re: [gkornbluth] Image gallery using jQuery
By Codee - March 3, 2011
Hi Jerry, I haven't checked yet but does your CMSBCookbook walk through using the same dynamic drive image gallery setup as the saladino site? Thanks!
Re: [equinox69] Image gallery using jQuery
By gkornbluth - March 4, 2011
Yes it does and it's been updated to use jQuery
The recipe is called:
"USING DYNAMIC DRIVE IMAGE THUMBNAIL VIEWER II"
Jerry
The recipe is called:
"USING DYNAMIC DRIVE IMAGE THUMBNAIL VIEWER II"
Jerry
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