使用 jQuery 缩略图滚动器并将图像加载到 div

Question

我希望有人能帮忙。

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

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

我对 jQuery 还是很陌生，并且相当确定我需要使用添加/删除 class 功能（当我将它与将图像加载到 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 缩略图滚动器并将图像加载到 div

问题描述

1 个解决方案

解决方案1
0 2011-06-21 10:55:00

使用 jQuery 缩略图滚动器并将图像加载到 div

问题描述

1 个解决方案

解决方案1 0 2011-06-21 10:55:00

解决方案1
0 2011-06-21 10:55:00