jQuery DIV fadeIn (or rollover) within repeat region

[drennan]

Hey all. I've just started using repeat regions and am stuck creating a rollover effect. I have a database of products/images and am displaying thumb images within the repeat region using <img src="images/thumbs/<?php echo $row_Recordset1['productId']; ?>.png" and all is working fine. When users rollover the thumb I want a DIV containing an orange border to fade in using jQuery so I don't have to save a second image with a border for each thumbnail. Normally with static images I would say something like.. $("#thumbWrap").hover(function() { $("#border").fadeIn etc, but I have no idea how to implement this so the border DIV fades in independently for each thumb within the repeat region. Can anyone suggest the best way to accomplish this? thanks guys

[Guest]

Add jquery and a unique id to each element nested inside the repeat region. Something like this:

<div id="border"></div>

do {

repeat stuff.

<div id="<?php echo $row_Recordset1['productId']; ?>">

<img src="images/thumbs/<?php echo $row_Recordset1['productId']; ?>.png">

</div>

jquery stuff

$("#<?php echo $row_Recordset1['productId']; ?>").hover(function() { $("#border").fadeIn

} while... repeat condition etc.

That should get you going. Notice the border is outside the repeated region to avoid multiple use of id in a page.

best,

Shocker

[David_Powers · Accepted solution]

The jQuery code that you have posted here relies on ID selectors, but an ID can be used only once on a page. Instead use classes. Something like this might work:

$('.thumbWrap').hover(function() {
    $(this).parent('div').fadeIn();
});

[drennan]

Thanks David. I didn't think of this as an option as still learning. All working now