"$('#img'+j).fadeIn("slow"); // fade in selected image (this is what
doesn't work, obviously)"
Did you notice that no where did you define or set variable "j" ?
On Dec 5, 8:15 pm, HXn <[EMAIL PROTECTED]> wrote:
> 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
