Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.05.2020, 16:48
ab3 ab3 вне форума
Интересующийся
Отправить личное сообщение для ab3 Посмотреть профиль Найти все сообщения от ab3
 
Регистрация: 26.05.2020
Сообщений: 10

Слайдер модального Окна
Подскажите пожалуйста как настроить слайдер.подскажите почему увеличение(уменьшение) индекса работает только один раз,как сделать,что бы при нажатии правой стрелки он всегда увеличивался,а если нажать потом левую,то он перепрыгнет через кликнутое изображение и покажет через одно.Что не так в коде?
Вот мой код

import gallery from "./gallery-items.js";

const ul = document.querySelector(".js-gallery");
const lightBox = document.querySelector(".js-lightbox");
const imgLightBox = document.querySelector("img.lightbox__image");
const closeModalBtn = document.querySelector(
  'button[data-action="close-lightbox"]'
);

closeModalBtn.addEventListener("click", closeModal);
ul.addEventListener("click", openModal);

function buildGalleryItem({ preview, description, original }) {
  return `<li class="gallery__item">
      <a
        class="gallery__link"
        href=${preview}
      >
        <img
          class="gallery__image"
          src=${preview}
          data-source="${original}"
          alt=${description}
        />
      </a>
    </li>`;
}

function createGalleryList(data) {
  data.forEach((el) => {
    ul.insertAdjacentHTML("beforeend", buildGalleryItem(el));
  });
}

createGalleryList(gallery);

function closeModal() {
  lightBox.classList.remove("is-open");
  imgLightBox.src = "";
}

function openModal(e) {
  e.preventDefault();
  lightBox.classList.add("is-open");
  const img = e.target;
  const src = img.dataset.source;

  imgLightBox.src = src;

  window.addEventListener("keydown", handlePress);

  lightBox.addEventListener("click", handleClick);
}
function handleClick(e) {
  if (e.target === imgLightBox) {
    return;
  }
  closeModal();
}


function handlePress(e) {
const link = e.target.href;
const currentImage = gallery.find((item) => item.preview === link);
let index = gallery.indexOf(currentImage);

function ArrowLeft() {
index--;
index < 0 && (index = gallery.length - 1);

show(index);
}

function ArrowRight() {
index++;
index >= gallery.length && (index = 0);

show(index);
}

function show(i) {
imgLightBox.src = gallery[i].original;
}

if (e.code === "ArrowLeft") {
ArrowLeft();
}

if (e.code === "ArrowRight") {
ArrowRight();
}

if (e.code !== "Escape") {
return;
}
closeModal();

}

Последний раз редактировалось ab3, 26.05.2020 в 17:19.
Ответить с цитированием
  #2 (permalink)  
Старый 26.05.2020, 16:59
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,705

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 26.05.2020, 22:12
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от ab3
подскажите почему увеличение(уменьшение) индекса работает только один раз,как сделать,что бы при нажатии правой стрелки он всегда увеличивался,а если нажать потом левую,то он перепрыгнет через кликнутое изображение и покажет через одно.Что не так в коде?
Так вы берёте текущий индекс картинки и прибавляете или вычитаете 1, а изменённое число нигде не хранится.

И кстати, при закрытии изображения следует отменить обработчик события нажатия клавиш.

https://codesandbox.io/s/mystifying-...=/src/index.js
Ответить с цитированием
  #4 (permalink)  
Старый 26.05.2020, 23:55
ab3 ab3 вне форума
Интересующийся
Отправить личное сообщение для ab3 Посмотреть профиль Найти все сообщения от ab3
 
Регистрация: 26.05.2020
Сообщений: 10

Спасибо,я бы сам не додумался(
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Структура модального окна bio Angular.js 1 07.07.2016 14:33
Отправка данных AJAX из модального окна r06otyaga jQuery 0 15.11.2015 19:28
оптимизировать скорость модального окна по клику kristow AJAX и COMET 4 26.02.2015 13:02
FancyBox: Размер модального окна больше размеров окна браузера (высота), как сделать? clgs Events/DOM/Window 3 22.01.2015 17:13
Вставка данных в textarea из модального окна (для Markitup) Roman Koff jQuery 0 26.08.2010 23:21