Question

I’ve got a jQuery Tools Scrollable I’ve been working on for awhile, and have gotten it to where it resizes based on the browser size dynamically, and the next button disables at the furthest right point in the scrollable.

Each item in the scrollable triggers a background change. I am now trying to get a “current” class toggled. When you hover over them, you get a white border. I want that to also be the .current state. How would I go about toggling that?

<div id="bkgrSelector">
<div class="scrollNav">
    <a class="prev"></a>
</div>
<div class="scrollable">   
    <div class="items" id="thumbs">
        <?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" />');
            }
        ?>

    </div>
</div>
<div class="scrollNav">
    <a class="next"></a>
</div>

JavaScript:

//Initiates Background selector scrollable
$("#bkgrSelector .scrollable").scrollable();

//Changes the background selector scrollable size, and handles the disabling of the next button at end of scrollable
$(window).bind('resize', function(){
    var width = $(document).width();
    var thumbWidth = Math.round(width - 350);
    $("#bkgrSelector").css("width", thumbWidth + "px" );
    $("#bkgrSelector .scrollable").css("width", (thumbWidth - 48) + "px" );

    var scrollable = jQuery("#bkgrSelector .scrollable").data("scrollable");
    var size = Math.floor(thumbWidth / 94);
    console.log(size);
    scrollable.onSeek(function(event, index) {
        if (this.getIndex() >= this.getSize() - size) {
            jQuery(".scrollNav .next").addClass("disabled");
        }
    });
    scrollable.onBeforeSeek(function(event, index) {
    if (this.getIndex() >= this.getSize() - size) {
      if (index > this.getIndex()) {
        return false;
      }
    }
    });  
 }).resize()

CSS:

#bkgrSelector .items img:hover, #bkgrSelector .items .current
{padding:0; border:2px solid #fff; cursor:pointer; }

Answer 1

If I understand your desired behavior correctly, when the user clicks an image you’d like the .current style to stick and then apply your background changing logic? If so, something like this would work:

$('#thumbs img').click(function() {

    // remove existing current selection
    $('#thumbs img.current').removeClass('current');

    // Apply style to selected item
    $(this).addClass('current');

});