Link to home
Start Free TrialLog in
Avatar of APD Toronto
APD TorontoFlag for Canada

asked on

Multiple of Image Swaps

Hi Experts,

I need to showcase several of products on a  single page, and each product can haave one or more images.  The number or images are not fixed. So I have a setup like
<div class="products" id="p1">
   <img ...>
   <img ...>
   <img ...>
   <img ...>
</div>
<div class="products" id="p2">
   <img ...>
   <img ...>
</div>

Open in new window


So, p1 has 4 images, and p2 has 2.

If this was 1 product per page, I would have a global variable that would track the number of images, using the .length property, and the current image. So, my question is, how would i apply this to multiple of products?

I would like to use [b]$('.produucts') which would return each product, then I can use .find('img), but I'm not sure how to track the details for each? Nested arrays?
Avatar of HainKurt
HainKurt
Flag of Canada image

wrap all in another div

<div id=AllProducts>
... your html here ...
</div>

then use

$('.produucts img') to get them all
SOLUTION
Avatar of HainKurt
HainKurt
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of APD Toronto

ASKER

...and?
ASKER CERTIFIED SOLUTION
Avatar of hielo
hielo
Flag of Wallis and Futuna image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial