Как реализовать переключение на следующую картинку в галерее в модальном окне? Стрелки поставил, событие поставил, а что дальше делать не совсем понимаю. Задача просто для практики jQuery, из головы.
Спасибо!
https://codepen.io/Slava91/pen/pwBrLP
$(document).ready(function() {
$("#thumbnail li a").click(function() {
$("#large img").attr({
"src": $(this).attr("href"),
"title": $("> img", this).attr("title")
});
$("#large h2").html($("> img", this).attr("title"));
return false;
});
$('.close').click(function() {
$('.modal-window').css('display', 'none');
})
$('#large img').click(function() {
$('.modal-window').css('display', 'block');
$('.modal-content').attr({
'src': $(this).attr('src')
})
})
$('.next').click(function() {
})
});
img {
width: 100%;
}
#large {
width: 600px;
/* height: 350px; */
float: left;
margin-top: 50px;
margin-left: 50px;
}
#large img {
width: 600px;
/* height: 263px; */
border: 5px solid #223348;
}
#thumbnail {
width: 210px;
height: 256px;
overflow: auto;
float: left;
list-style: none;
margin-top: 50px;
margin-left: 16px;
margin-left: 8px;
padding: 5px;
border: 3px solid #223348;
background: #fff;
}
#thumbnail li {
float: left;
width: 79px;
margin: 8px;
margin: 5px;
}
#thumbnail a {
display: block;
width: 75px;
height: 56px;
padding: 1px;
border: 1px solid #ccc;
}
#thumbnail a:hover {
border-color: #405061;
}
.modal-window {
padding-top: 50px;
display: none;
z-index: 1;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, .9);
}
.modal-content {
max-width: 50%;
margin: auto;
display: block;
}
.caption {
text-align: center;
max-width: 100%;
margin: auto;
color: #ccc;
padding: 10px 0;
height: 150px;
display: block;
}
.modal-content,
.caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: .6s;
animation-name: zoom;
animation-duration: .6s;
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
@-webkit-keyframes zoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: .3s;
}
.close:hover,
.close:focus {
text-decoration: none;
cursor: pointer;
color: #bbb;
}
.paganation {
color: #fff;
font-size: 40px;
position: absolute;
bottom: 10%;
right: 50%;
cursor: pointer;
}
Ответ
Поскольку задачу вы себе поставили для обучения, я опишу примерный алгоритм ваших действий:
Вам нужно как-то отметить текущую активную картинку. Допустим, вы будете отмечать текущую картинку классом active. При клике на картинку в галерее, сначала снимайте со всех картинок класс active, а затем текущей картинке в галерее добавляйте класс active
При нажатии на элемент с классом next ищите в списке картинку с классом active
Когда такая картинка найдена, ищите следующий сестринский элемент в DOM-дереве с помощью метода .next() и сохраните его в переменную.
С помощью метода .trigger() вызовите событие click на запомненном элементе, чтобы сымитировать его активацию и не писать второй раз то же самое, что у вас было уже написано для клика по картинке в галерее.
Чтобы листать в другую сторону, используйте метод .prev()
Внимание! Чтобы зациклить прокрутку, не забывайте при вызове .next() проверять, а существует ли "следующий" элемент. Поскольку текущая картинка может быть последней в списке. Если следующей картинки не существует, вы можете активировать первую картинку в галерее, точно так же с помощью метода .trigger() вызвав событие click
Для элемента с классом prev все то же самое, только в случае уже первой картинки в галерее, вы будете активировать последнюю в списке.
Комментариев нет:
Отправить комментарий