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

StackOverflow https://stackoverflow.com/questions/809965

  •  03-07-2019
  •  | 
  •  

Вопрос

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

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

<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 следующее изображение
  • И так далее, и так далее.
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top