使用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

回答

相关问题