Галерея jQuery и ajax обеспечивает эффект постепенного появления и исчезновения при нажатии большого пальца!
Вопрос
Нужна помощь, пожалуйста.
У меня есть строка горизонтальных миниатюр, загруженных как ОДНО изображение, на которые ссылаются разные миниатюры изображений через карту изображений как таковую:
<div id="zoom">
<img src="" />
</div>
<div id="collectionindex">
<img src="thumbnail-strip.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="151,0,211,39" href="image1.jpg" alt="" />
<area shape="rect" coords="215,0,275,39" href="image2.jpg" alt="" />
<area shape="rect" coords="279,0,339,39" href="image3.jpg" alt="" />
<area shape="rect" coords="343,0,403,39" href="image4.jpg" alt="" />
<area shape="rect" coords="407,1,467,40" href="image5.jpg" alt="" />
<area shape="rect" coords="471,0,531,39" href="image6.jpg" alt="" />
</map>
</div>
Тег IMG в div с id="zoom" — это мое окно масштабирования AJAX, когда пользователи «нажимают» на миниатюры, чтобы отобразить увеличенную версию изображения.
Это код jQuery, который мне нужно постепенно исчезать в БОЛЬШИХ версиях миниатюр в поле ZOOM.
<script type="text/javascript">
$(document).ready(function(){
$("area").click(function(){
var largePath = $(this).attr("href");
$("#zoom img").attr({ src: largePath }).fadeIn("slow"); return false;
});
});
</script>
Прямо сейчас jQuery исчезает ТОЛЬКО при первом нажатии на миниатюру, остальные просто появляются при нажатии, а не исчезают.Я бы хотел, чтобы это работало следующим образом:
- пользователь нажимает на миниатюру
- большое изображение ЗАТЕСНЯЕТСЯ в рамке масштабирования
- пользователь нажимает на другую миниатюру
- первое изображение ЗАТЕКАЕТСЯ, а вторая выбранная миниатюра ЗАТЕСНЯЕТСЯ.
- и т. д.
Надеюсь, я объяснил это ясно.:) Любая помощь будет безмерно признательна.
Решение
Вам просто нужно затемнить изображение, прежде чем менять путь и затемнять его...поэтому ваша функция щелчка должна стать:
РЕДАКТИРОВАТЬ:Забыли, что анимация показа/скрытия происходит асинхронно, поэтому вам нужно использовать обратный вызов при затухании, чтобы вызвать все остальное...код должен быть:
<script type="text/javascript">
$(document).ready(function(){
$("area").click(function(){
var largePath = $(this).attr("href");
$("#zoom img").fadeOut("slow", function() {
$(this).attr({ src: largePath }).fadeIn("slow");
});
return false;
});
});
</script>
Другие советы
Я здесь новичок и только что увидел, что мой комментарий к вашему ответу был ужасно оформлен.:П
спасибо за быстрый ответ - только что попробовал это, и это выглядит так, как будто оно ОТОБРАЖАЕТ только что выбранное БОЛЬШОЕ изображение, ЗАТЕЛЯЕТ его, затем снова ЗАТЕКАЕТ.
мне это нужно, чтобы:
- FADE IN 1-е изображение после выбора пользователем
- пользователь выбирает следующее изображение > FADE OUT 1-е изображение > FADE IN следующее изображение
- И так далее, и так далее.