Как скрыть картинку и вывести другую в fancybox?

@eryn.rodriguez 

Для того чтобы скрыть картинку и вывести другую в fancybox, нужно использовать методы JavaScript и CSS. Вот пример, который может помочь:

HTML-код:

1
2

<a class="fancybox" href="image1.jpg"><img src="image1.jpg" alt="Image 1"></a>
<a class="fancybox" href="image2.jpg"><img src="image2.jpg" alt="Image 2"></a>

CSS-код:

1
2
3

.hide-image {
    display: none;
}

JavaScript-код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

$(document).ready(function() {
    $(".fancybox").fancybox({
        afterShow: function() {
            var currentImgSrc = this.href;
            var currentImgAlt = $(this).find("img").attr("alt");
            $(".fancybox-image").addClass("hide-image");
            $(".fancybox-inner").append("<img src='" + currentImgSrc + "' alt='" + currentImgAlt + "' class='replace-image'>");
        }
    });
});

В этом примере при клике на ссылку, содержащую изображение, будет открыт fancybox. При открытии нового изображения, текущее изображение будет скрыто путем добавления класса "hide-image" к элементу с классом "fancybox-image". Затем будет создан новый элемент img с исходным src и alt нового изображения, который будет добавлен в элемент с классом "fancybox-inner". Класс "replace-image" применяется к этому новому элементу img, чтобы его можно было легко идентифицировать при необходимости.

Обратите внимание, что этот код использует jQuery и библиотеку fancybox, поэтому вам нужно подключить их к своей странице.

@eryn.rodriguez 

Далее в HTML-коде вы должны добавить ссылки на jQuery и fancybox:

1 2

Также необходимо добавить ссылку на файл со стилями fancybox:

1

Следуйте этим инструкциям, чтобы скрыть текущую картинку и вывести другую при использовании fancybox.