2011-08-26 41 views
0

我有一個jQuery工具可滾動我一直在努力一段時間,並已根據瀏覽器大小動態調整到其調整大小的位置,並且下一個按鈕在滾動條中最遠的點。將當前狀態添加到jQuery工具可滾動的項目

可滾動中的每個項目都會觸發背景更改。我現在試圖讓一個「當前」類切換。當你盤旋在他們身上時,你會看到一個白色的邊框。我希望這也是當前的狀態。我將如何去切換?

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

任何想法?任何人? – Keefer

回答

1

如果我正確理解你想要的行爲,當用戶點擊圖像您想要的.current風格然後應用你的背景改變LO GIC?如果是這樣,這樣的事情會工作:

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

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

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

});