Hi, I'm brand new to jQuery. Here's what I'm trying to achieve:
I have an unordered list that contains thumbnails for a photo gallery,
generated dynamically with PHP:
<div id="gallery">
<ul>
<li id="left"></li>
<li class="selected" style="background:
url(weddings-gallery/thumbs/
_DSC3950.jpg) no-repeat;">
<div>
<img id="img0" class="start"
src="weddings-gallery/images/
_DSC3950.jpg" title="" alt="" />
</div>
</li>
<li class="" style="background: url(weddings-gallery/thumbs/
_DSC4103.jpg) no-repeat;">
<div>
<img id="img1" style="display: none;"
src="weddings-gallery/images/
_DSC4103.jpg" title="" alt="" />
</div>
</li>
...
(The img ID is generated incrementally with PHP.)
When an LI is clicked, the image currently showing fades out and the
LI that was clicked is supposed to cause its corresponding image to
fade in.
jQuery script I have so far:
$(document).ready(function(){
$('#gallery ul li').click(function() {
$('#gallery ul li').removeClass('selected');
$('#gallery ul li').removeClass('thumb-hover');
$(this).addClass('selected');
var getLi =
document.getElementById('gallery').getElementsByTagName('li');
for (var i=0; i<getLi.length; i++) {
$('#img'+i).fadeOut("slow"); // fade out all images
}
$('#img'+j).fadeIn("slow"); // fade in selected image (this is
what
doesn't work, obviously)
});
});
How do I achieve this? With strictly PHP, I could pass the integer
that corresponds to which 'img' I need to show (e.g., 0 for img0).
I'm not sure how to do this with jQuery.
Thanks
