使用jQuery縮略圖滾輪和加載圖像到一個div

我希望有人可以提供幫助。使用jQuery縮略圖滾輪和加載圖像到一個div

我使用了jQuery縮圖滾輪插件（http://manos.malihu.gr/jquery-thumbnail-scroller）來顯示縮略圖圖像的列表。我已經添加了一些代碼（在此論壇的幫助下），以便在單擊其中一個縮略圖時，它會將較大的版本加載到頁面上的div中。

我希望能夠進一步修改代碼，這樣，當網頁加載1，在滾動第一縮略圖被高亮顯示，它的鏈接放大版本已裝入到div。當單擊下一個縮略圖時，「高亮」類將從前者中刪除，並添加到當前活動的縮略圖中。我還是相當新的jQuery和相當肯定我需要使用添加/刪除類功能（這似乎並沒有工作，當我有它加載到一個div的圖像一起） - 但我不知道如何確保在加載頁面時顯示第一個縮略圖及其更大的版本。

我的代碼如下...任何幫助/指針將不勝感激。

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    <script type="text/javascript" src="tym_js/jquery.easing.1.3.js"></script> 
    <script src="tym_js/jquery.thumbnailScroller.js"></script> 
    <script type="text/javascript"> 
    (function($){ 
    window.onload=function(){ 
     $("#tS2").thumbnailScroller({ 
      scrollerType:"clickButtons", 
      scrollerOrientation:"horizontal", 
      scrollSpeed:2, 
      scrollEasing:"easeOutCirc", 
      scrollEasingAmount:600, 
      acceleration:4, 
      scrollSpeed:800, 
      noScrollCenterSpace:10, 
      autoScrolling:0, 
      autoScrollingSpeed:2000, 
      autoScrollingEasing:"easeInOutQuad", 
      autoScrollingDelay:500 
     }); 
    } 
    })(jQuery); 
    </script> 
    <script type="text/javascript"> 
var $j = jQuery.noConflict(); 
$j(document).ready(function(){ 
$j("ul#thumbnailImages li a").click(function(event) { 
event.preventDefault(); 
var image = $j(this).attr('href'); 
    $j("#largeImage img").attr('src',image); 
    }); 
    }); 

    $(document).ready(function(){ 
     $('ul#thumbnailImages li a').click(function(){ 
      $('ul#thumbnailImages li a').removeClass("activeThumbnail"); 
      $(this).addClass("activeThumbnail"); 
     }); 
     }); 
    </script>

和HTML是這裏

<body id="galleryImages"> 
<div id="bannerAdvert">Banner script goes here</div> 
<div id="largeImage"><img src="http://petcatinsurance.org.uk/wp-content/uploads/2010/04/pet-cat-insurance.jpg" /></div> 
<div id="tS2" class="jThumbnailScroller"> 
    <div class="jTscrollerContainer"> 
    <div class="jTscroller"> 
    <ul id="thumbnailImages"> 
    <li><a href="pet-cat-insurance.jpg"><img src="pet-cat-insurance.jpg" alt="" /></a></li> 
    <li><a href="large_cat1.jpg"><img src="large_cat1.jpg" alt="" /></a></li> 
    <li><a href="hello-kitty-cat.jpg"><img src="hello-kitty-cat.jpg" alt="" /></a></li> 
    <li><a href="sofa.jpg"><img src="sofa.jpg" alt="" /></a></li> 

    </ul> 
    </div> 
    </div> 
    <a href="#" class="jTscrollerPrevButton"></a> 
    <a href="#" class="jTscrollerNextButton"></a> </div> 
</html>

來源

2011-06-08 V Neal

工作過吧！（「＃thumbnailImages li a」）。click（function（event）{ event.preventDefault（）; var image = $（this）.attr（' （'.thread'）; \t \t $（this）.addClass（' activeThumbnail'）; }）; }）; – 2011-06-08 14:14:14

@V Neal：請你補充一下這個答案嗎？ – 2011-06-17 16:07:03

工作過吧！

$(document).ready(function(){ 
    $("#thumbnailImages li a").click(function(event) { 
    event.preventDefault(); 
    var image= $(this).attr('href'); 
    $('#largeImage img').attr('src',image); 
    $('.activeThumbnail').removeClass('activeThumbnail'); 
    $(this).addClass('activeThumbnail'); 
    }); 
});

來源

2011-06-21 10:55:00

使用jQuery縮略圖滾輪和加載圖像到一個div

回答

相關問題