Jquery plugins 使用jQuery缩略图滚动条&；将图像加载到div中_Jquery Plugins

Jquery plugins 使用jQuery缩略图滚动条&；将图像加载到div中

jquery-plugins

Jquery plugins 使用jQuery缩略图滚动条&；将图像加载到div中,jquery-plugins,Jquery Plugins,我希望有人能帮忙我正在使用jQuery缩略图滚动插件(http://manos.malihu.gr/jquery-thumbnail-scroller)显示缩略图列表的步骤。我已经添加了一些代码（在这个论坛的帮助下），这样当点击其中一个缩略图时，它会将较大的版本加载到页面上的一个div中我希望能够进一步修改代码，以便在第一次加载页面时，突出显示滚动条中的第一个缩略图，并且其链接的更大版本已加载到div中。单击下一个缩略图时，将从前一个缩略图中删除“highlight”类，并将其添加到当前活动

我希望有人能帮忙

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

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

我对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>


（函数（$）{
window.onload=function（）{
$（“#tS2”）.thumbnailScroller（{
滚动类型：“单击按钮”，
滚动方向：“水平”，
滚动速度：2，
滚动条：“easeOutCirc”，
滚动测量装载量：600，
加速度：4，
滚动速度：800，
noScrollCenterSpace:10，
自动滚动：0，
自动扫描速度：2000，
自动克隆：“easeInOutQuad”，
自动克隆延迟：500
});
}
})（jQuery）；
var$j=jQuery.noConflict（）；
$j（文档）.ready（函数（）{
$j（“ul#thumbnailImages li a”）。单击（功能（事件）{
event.preventDefault（）；
var image=$j（this.attr（'href'）；
$j（“#大图像img”）.attr（'src'，图像）；
});
});
$（文档）.ready（函数（）{
$（'ul#thumbnailImages li a'）。单击（函数（）{
$（'ul#thumbnailImages li a'）.removeClass（“ActiveThumbnailimages”）；
$（this.addClass（“Active缩略图”）；
});
});

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>


横幅脚本在这里

已经解决了

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

我已经解决了$（document）.ready（function（）{$（“#thumbnailImages li a”）。单击（function（event）{event.preventDefault（）；var image=$（this.attr（'href'）；$（'#largeImage img'）。attr（'src'，image）；$（'.activeThumbnail'）。removeClass（'activeThumbnail'）；$（this.addClass（'activeThumbnail'）；）; });@V Neal:你能补充一下这个作为回答吗？