Re: [Kittybiccy] Image gallery using jQuery
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
<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/