Добавление текущего состояния в элементы jQuery Tools Scrollable

У меня есть прокрутка инструментов jQuery, над которой я работал некоторое время, и я получил ее там, где она динамически изменяет размер в зависимости от размера браузера, а следующая кнопка отключается в самой дальней правой точке прокручиваемой.

Каждый элемент в прокручиваемом вызывает изменение фона. Сейчас я пытаюсь переключить "текущий" класс. Когда вы наводите на них курсор, вы получаете белую рамку. Я хочу, чтобы это также было состоянием .current. Как мне это переключить?

<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; }

jquery scrollable jquery-scrollable jquery-tools
person Keefer    schedule 26.08.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если я правильно понимаю ваше желаемое поведение, когда пользователь щелкает изображение, вы хотите, чтобы стиль .current прикреплялся, а затем применяли логику изменения фона? Если это так, что-то вроде этого будет работать:

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

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

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

});
person Jeremy Smith    schedule 12.10.2011