Слайд -шоу с JS Modal, который открывается с помощью нажатия на изображение или кнопку ⇐ Javascript

[Anonymous]

У меня есть галерея слайд -шоу с изображением с модальной встроенной в него с использованием JavaScript. < /p>
Когда пользователь нажимает на изображение, отображаемое на слайде, модал открывает на этом конкретном изображении. Я также хотел бы добавить кнопку под слайд -шоу, которое открывает модальный для отображаемого изображения, но я не знаю, как ее связать, чтобы оно открывалось на текущем слайде. < /P>
Я попробовал несколько сценариев, пытаясь включить переменную нажмите на кнопку в цикл I, и в конечном итоге просто мешает сценариям открывать модальный через изображение. < /P>
Вот полное Slideshow: https://codepen.io/canquackattack/pen/ognbome написан />

Код: Выделить всё

let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("demo");
let captionText = document.getElementById("slide_caption");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
captionText.innerHTML = dots[slideIndex - 1].alt;
}

// Get the modal
var modal = document.getElementById("myModal");

var btn = document.getElementById("myBtn"); // Get the button that opens the modal

// Create reference to the modal for all images using a class!
var images = document.getElementsByClassName('myImages');

// Get each image and insert it inside the modal - use its "alt" text as a caption
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) { // click on 
[img]https://www.w3schools.com/howto/img_woods_wide.jpg[/img]


2 / 3
[img]https://www.w3schools.com/howto/img_5terre_wide.jpg[/img]


3 / 3
[img]https://www.w3schools.com/howto/img_mountains_wide.jpg[/img]


❮
❯




[img]https://www.w3schools.com/howto/img_woods_wide.jpg[/img]

[img]https://www.w3schools.com/howto/img_5terre_wide.jpg[/img]

[img]https://www.w3schools.com/howto/img_mountains_wide.jpg[/img]




Open Modal



×

Подробнее здесь: https://stackoverflow.com/questions/794 ... -or-button