Галерея jQuery и ajax постепенно исчезают и исчезают при нажатии большого пальца! - PullRequest
Новая
       7

Галерея jQuery и ajax постепенно исчезают и исчезают при нажатии большого пальца!

0 голосов
/ 01 мая 2009

Нужна помощь, пожалуйста.

У меня есть строка горизонтальных миниатюр, загруженных как ОДНО изображение с различными изображениями миниатюр, на которые ссылается карта изображений, как таковая: 

<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 ТОЛЬКО исчезает при первом нажатии на миниатюру, остальные просто появляются при нажатии, а не исчезают. Я бы хотел, чтобы это работало следующим образом:

  • пользователь нажимает на миниатюру
  • большое изображение исчезает, чтобы увеличить масштаб
  • пользователь нажимает другую миниатюру
  • первое изображение FADES OUT и второе выбранное уменьшенное изображение FADES IN

Надеюсь, я объяснил это ясно. :) Любая помощь будет очень ценится.

Ответы [ 2 ]

2 голосов
/ 01 мая 2009

Вам просто нужно потушить изображение перед тем, как изменить путь и затемнить его ... так что ваша функция щелчка должна стать:

РЕДАКТИРОВАТЬ : Забыл, что анимация показа / скрытия происходила асинхронно, поэтому вам нужно использовать обратный вызов при затухании, чтобы вызвать остальные ... код должен быть: 

<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>
0 голосов
/ 01 мая 2009

Я новичок здесь и только что увидел, что мой комментарий к вашему ответу был ужасно стилизован. : P

спасибо за быстрый ответ - только что попробовал это, и это за исключением того, что похоже, что он отображает недавно выбранное большое изображение, затемняет его, затем снова затухает.

Мне нужно это:

  • FADE IN 1-е изображение после выбора пользователем
  • пользователь выбирает следующее изображение> FADE OUT 1st image> FADE IN next image
  • и т. Д. И т. П.
...