Using jQuery Thumbnail Scroller & loading an image into a div
I'm hoping someone can help.
I'm using the jQuery Thumbnail Scroller plugin (http://manos.malihu.gr/jquery-thumbnail-scroller) to display a list of thumbnail images. I've added some code (with the help of this forum) so that when one of the thumbnails are clicked, it loads the larger version into a div on the page.
I'd like to be able to amend the code even further so that when the page 1st loads, the 1st thumbnail in the scroller is highlighted and it's linked larger version is already loaded into to the div. When the next thumbnail is clicked, the 'highlight' class is removed from the former and added to the now active thumbnail.
I'm still fairly new to jQuery and am fairly certain I need to use the add/remove class functions (which doesn't appear to be working when i have it in conjunction with loading an image into a div) - but i have NO idea how to ensure that on load of the page, the 1st thumbnail and it's larger version are shown.
My code is below... any help/pointers would be greatly appreciated.
<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.开发者_C百科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>
and the HTML is here
<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>
Have worked it out!
$(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');
});
});
加载中,请稍侯......
精彩评论