Страницы

Поиск по вопросам

среда, 12 июня 2019 г.

Как организовать навигацию вперед и назад по галерее на jQuery?

Как реализовать переключение на следующую картинку в галерее в модальном окне? Стрелки поставил, событие поставил, а что дальше делать не совсем понимаю. Задача просто для практики 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; }

image01.jpg
  • image01.jpg
  • image02.jpg
  • image03.jpg
  • image04.jpg
  • image05.jpg
  • image06.jpg
  • image07.jpg
  • image08.jpg
  • image09.jpg


Ответ

Поскольку задачу вы себе поставили для обучения, я опишу примерный алгоритм ваших действий:
Вам нужно как-то отметить текущую активную картинку. Допустим, вы будете отмечать текущую картинку классом active. При клике на картинку в галерее, сначала снимайте со всех картинок класс active, а затем текущей картинке в галерее добавляйте класс active При нажатии на элемент с классом next ищите в списке картинку с классом active Когда такая картинка найдена, ищите следующий сестринский элемент в DOM-дереве с помощью метода .next() и сохраните его в переменную. С помощью метода .trigger() вызовите событие click на запомненном элементе, чтобы сымитировать его активацию и не писать второй раз то же самое, что у вас было уже написано для клика по картинке в галерее.
Чтобы листать в другую сторону, используйте метод .prev()
Внимание! Чтобы зациклить прокрутку, не забывайте при вызове .next() проверять, а существует ли "следующий" элемент. Поскольку текущая картинка может быть последней в списке. Если следующей картинки не существует, вы можете активировать первую картинку в галерее, точно так же с помощью метода .trigger() вызвав событие click
Для элемента с классом prev все то же самое, только в случае уже первой картинки в галерее, вы будете активировать последнюю в списке.

Комментариев нет:

Отправить комментарий