Question

我希望有人可以提供帮助。

我正在使用jQuery Thumbnail Scroller插件（http://manos.malihu.gr/jquery-thumbnail-scroller）来显示缩略图图像列表。我添加了一些代码（在此论坛的帮助下），以便在单击其中一个缩略图时，将较大的版本加载到页面上的div中。

我希望能够进一步修改代码，以便在第1页加载时，滚动条中的第1个缩略图会突出显示，并且链接的较大版本已经加载到div中。单击下一个缩略图时，将从前者删除“突出显示”类，并将其添加到现在活动的缩略图中。

我仍然是jQuery的新手，我相当肯定我需要使用add / remove类函数（当我将它与将图像加载到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>

Answer 1

已经解决了！

$(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'); 
  });
});

使用jQuery Thumbnail Scroller＆amp;将图像加载到div中

1 个答案: