Вроде заработало, но не совсем так, как хочется
В общем хочу переделать вот это
http://modxcms.com/forums/index.php/topic,42400.0.html из простого javascript на jQuery, чтобы картинки менялись так: кликаем по миниатюре снизу, текущая картинка среднего размера плавно меняет свою прозрачность от 1 до 0, меняем src на адрес той картинки по миниатюре которой кликнули и показываем новую среднюю картинку, меняя прозрачность с 0 до 1. Заодно и jQuery поучить
Делаю так:
1. добавляю в секцию head
<script type="text/javascript" src="assets/js/jquery-1.3.2.min.js"></script>
2. добавляю в секцию head
<script type=text/javascript language=JavaScript>
<!--
$(document).ready(function() {
$("div.thumbs a img").click(function () {
$("#photo_img").fadeTo("slow", 0);
$("#photo_img").attr("src", "[(site_url)]assets/images/Bombardier Global Express/65_2.jpg");
$("#photo_img").fadeTo("slow", 1);
});
});
//-->
</script>
3. В шаблоне блок с картиками так сделано:
<a name="interier"></a>
<div class="data clear">
<div class="interier"><img id="photo_img" src="[*interior-of-the-salon-1*]" alt="Интерьер салона [*pagetitle*]"/></div>
<div class="thumbs">
<a href="[~[*id*]~]#interier"><img src="[*interior-of-the-salon-1*]" width="94" alt="Интерьер салона [*pagetitle*]"/></a>
<a href="[~[*id*]~]#interier"><img src="[*interior-of-the-salon-2*]" width="94" alt="Интерьер салона [*pagetitle*]"/></a>
<a href="[~[*id*]~]#interier"><img src="[*interior-of-the-salon-3*]" width="94" alt="Интерьер салона [*pagetitle*]"/></a>
<a href="[~[*id*]~]#interier"><img src="[*interior-of-the-salon-4*]" width="94" alt="Интерьер салона [*pagetitle*]"/></a>
</div>
</div>
Но пока 2 проблемы:
1. Сначала меняется картинка среднего размера, а уже потом эфекты показываются, тоесть она затухает и появляется обратно, а по задумке должно быть так, что сначала затухает, меняется значение src и появляется обратно уже другая картинка...
2. Пока адрес новой картинки статично забил...это получается, что для каждой миниаютры нужно код писать ? ...или может можно как-нить брать значение src того img, по которому кликаю, типа вот этого как-нибудь, только рабочего
:
<script type=text/javascript language=JavaScript>
<!--
$(document).ready(function() {
$("div.thumbs a img").click(function () {
$("#photo_img").fadeTo("slow", 0);
$("#photo_img").attr("src", "$("div.thumbs a img").attr("src")");
$("#photo_img").fadeTo("slow", 1);
});
});
//-->
</script>
