Я надеюсь, что кто-то может помочь.
Я использую плагин jQuery Thumbnail Scroller (http://manos.malihu.gr/jquery-thumbnail-scroller) для отображения списка миниатюр изображений. Я добавил некоторый код (с помощью этогофорум), чтобы при нажатии на одну из миниатюр она загружала большую версию в div на странице.
Я бы хотел еще больше изменить код, чтобы при первой загрузке страницы1-й эскиз в скроллере подсвечивается, и его связанная версия уже загружена в div. При нажатии на следующий эскиз класс «highlight» удаляется из первого и добавляется к теперь активному миниатюре.
Я все еще довольно новичок в jQuery и вполне уверен, что мне нужно использовать функции класса add / remove (которые, кажется, не работают, когда у меня есть это вместе с загрузкой изображения в div) - ноЯ понятия не имею, как убедиться, что при загрузке страницы отображаются 1-й эскиз и его увеличенная версия.
Мой код указан ниже ... любая помощь / указаниеRS был бы очень признателен.
<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>