Добра. Честно — я откровенно не сильна в скриптах; так, на начальном уровне: что-то отредактировать, написать простенькое. И посему в итоге столкнулась с такой проблемой:
На данный момент я верстаю портфолио. В нём есть блок с несколькими элементами, по клике на которые появляется модальное окно, а в нём галерея изображений (скриншот). При клике на миниатюру — исходное изображение заменяется на выбранное.
Проблема в том, что когда я закрываю модальное окно и открываю другой проект, то вместо исходного изображения, отображается выбранное в прошлый раз.
Можно ли сбросить как-то это событие, чтобы изображение, заданное в HTML-коде, отображалось как есть при открытии модального окна, а не отображалось то, что было выбрано раньше? То есть, для каждого блока (галереи) у меня есть исходное изображение (указано в div.fullImage), которое отображается автоматически и меняется только по клику на миниатюру. Но сейчас оно заменяется на то, что было выбрано активным в момент, когда последний раз открывалось модальное окно и подгружалась галерея.
HTML:
<!-- галерея -->
<div id="allDiamondImage">
<div class="galleryBox">
<div class="thumbnails">
<a href="images/design_works/diamond/diamondDark.jpg" class="active">
<img src="images/design_works/diamond/diamondDark.jpg" alt="diamond dark page">
</a>
<a href="images/design_works/diamond/diamond.jpg">
<img src="images/design_works/diamond/diamond.jpg" alt="diamond page">
</a>
<a href="images/design_works/diamond/sketch.jpg">
<img src="images/design_works/diamond/sketch.jpg" alt="sketch">
</a>
<a href="images/design_works/diamond/vector.png">
<img src="images/design_works/diamond/vector.jpg" alt="vector">
</a>
</div>
<div class="view">
<div class="fullImage">
<a href="#" class="prev"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
<a href="#" class="next"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
<img src="images/design_works/diamond/diamondDark.jpg" alt="full">
</div>
</div>
</div>
</div>
<!--галерея // end-->
Скрипт:
$(function gallery() {
$('.thumbnails a').click(function() { // При нажатии на миниатюру
var images = $(this).find('img');
var imgSrc = images.attr('src');
$(".fullImage img").attr({ src: imgSrc }); // Подменяем адрес большого изображения на адрес выбранного
$(this).siblings('a').removeClass('active'); // Удаляем класс .active со ссылки чтоб убрать рамку
images.parent().addClass('active'); // Добавляем класс .active на выбранную миниатюру
return false;
});
$('.next').click(function() { // При нажатии на кнопку "вперед"
var count = $('.thumbnails a').length; // Общее количество изображений
var n = parseInt($('.thumbnails a').index($('.active')) + 1); // Порядковый номер текущего изображения
var activeImg = $('.thumbnails .active'); // Активное на данный момент изображение
var nextSrc;
if (count != n) { // - Если изображение не последнее
nextSrc = activeImg.next().find('img').attr('src'); // В переменную записывается адрес следующего изображения
$('.thumbnails .active').removeClass('active'); // Удаляется класс .active с предыдущей миниатюры
activeImg.next().addClass('active'); // На миниатюру следующего изображения вешается класс .active
} else { // - Если текущее изображение последнее в списке
nextSrc = $('.thumbnails a').first().find('img').attr('src'); // В переменную записывается адрес первого изображения
$('.thumbnails .active').removeClass('active'); // Удаляется класс .active с предыдущей миниатюры
$('.thumbnails a').first().addClass('active'); // На первую миниатюру вешается класс .active
}
$('.fullImage img').attr({ src: nextSrc }); // Подменяем адрес большого изображения на адрес следующего
return false;
});
$('.prev').click(function() { // При нажатии на кнопку "назад"
var count = $('.thumbnails a').length; // Общее количество изображений
var n = parseInt($('.thumbnails a').index($('.active')) + 1); // Порядковый номер текущего изображения
var activeImg = $('.thumbnails .active'); // Активное на данный момент изображение
var prevSrc;
if (n != 1) { // - Если текущее изображение не первое
prevSrc = activeImg.prev().find('img').attr('src'); // В переменную записывается адрес предыдущего изображения
$('.thumbnails .active').removeClass('active'); // Удаляется класс .active активной до этого миниатюры
activeImg.prev().addClass('active'); // На миниатюру изображения слева вешается класс .active
} else { // - Если текущее изображение первое
prevSrc = $('.thumbnails a:last').find('img').attr('src'); // В переменную записывается адрес последнего изображения
$('.thumbnails .active').removeClass('active'); // Удаляется класс .active с предыдущей миниатюры
$('.thumbnails a:last').addClass('active'); // На последнюю миниатюру вешается класс .active
}
$('.fullImage img').attr({ src: prevSrc }); // Подменяется адрес большого изображения на адрес следующего
return false;
});
});