Question

I’ve got thumbnails being generated dynamically from an array to toggle a background image for the page:

<?php
            for($i=0; $i < count($imageArray); $i++){
                 echo('<img onclick="changeBig(\''.$imageArray[$i].'\')" src="/lib/img/bkgr/'.$imageArray[$i].'" alt="thumbnail image" width="77" height="44" />');
            }
        ?>

I want to add a class of “current” to the thumbnail image when it is the selected/active background:

$('#bkgrSelector img').toggleClass(current, addOrRemove);

jQuery’s toggleClass should do the trick, but I would want to clear the class off of previously clicked images when a new one is selected.

How fo I go about doing that?

Is there a better way via PHP or jQuery to toggle the current class on the image thumbnails?

The post-rendered bit from that PHP array is below, as requested:

<div id="bkgrSelector"> 
    <div class="scrollNav"> 
        <a class="prev"></a> 
    </div> 
    <div class="scrollable">   
        <div class="items" id="thumbs"> 
            <img onclick="changeBig('Antipasti.jpg')" src="/lib/img/bkgr/Antipasti.jpg" alt="thumbnail image" width="77" height="44" />

Answer 1

Remove the common class from all other images and then re-apply it to the one selected.

$('#bkgrSelector img').click(function(){
    $('#bkgrSelector img').removeClass('selected');
    $(this).addClass('selected');
});