Question

I am working on a simple image gallery with a larger picture displayed above a line of thumbnails below. I have set the initial opacity of each thumbnail to 0.3 by using a css rule targeting the li. Using javascript I want to change the opacity of the thumbnail that is currently selected to 1, but keep the rest set at 0.3.

I have managed to change the current thumbnail’s opacity from 0.3 to 1 but what I cannot figure out how to do is change the previous (or next) thumbnails opacity back to 0.3.

For example, if thumbnail #3 is currently selected I want all the remaining 5 thumbnails to revert back to their orignal opacity setting of 0.3

I have put some of my code into the below link so you can get an idea of what I going on about.

div class=”thumbnails”>

<ul>
    <li><a href='#' class='thumb' id="thumb_1"></a></li>
    <!-- MORE FOLLOW -->
</ul>

$("#nextBtn").click(function() {
    currentPic++;
    $(".thumbnails ul li:nth-child(" + currentPic + ")").animate({
        "opacity": "1"
    });
});

Full code sample: http://jsfiddle.net/nqKJw/

Answer 1

In the function where you are setting the opacity of the desired thumbnail to 1, first set all thumbnails to an opacity of .3:

$("#nextBtn").click(function() {
    $(".thumbnails ul li").animate({
        "opacity": "0.3"
    });
    currentPic++;
    $(".thumbnails ul li:nth-child(" + currentPic + ")").animate({
        "opacity": "1"
    });
});

Try it: http://jsfiddle.net/nqKJw/1/