Следующие/предыдущие кнопки для добавления в модальный

Question

Полностью новый в этом мире, но я просто обожаю его, и я хочу извлечь из него все возможное. Я делаю свой собственный фотосессия, и я застрял здесь со следующей/предыдущей кнопкой в ​​модальной форме. Что делать?

<img id="myImg" src="myimage" alt="wjuuuu" width="760" height="478"> 
 

 

 
<!-- The Modal --> 
 
<div id="myModal" class="modal"> 
 
    <span class="close">×</span> 
 
    <img class="modal-content" id="img01"> 
 
    <div id="caption"></div> 
 
</div> 
 

 
<script> 
 
// Get the modal 
 
var modal = document.getElementById('myModal'); 
 

 
// Get the image and insert it inside the modal - use its "alt" text as a caption 
 
var img = document.getElementById('myImg'); 
 
var modalImg = document.getElementById("img01"); 
 
var captionText = document.getElementById("caption"); 
 
img.onclick = function(){ 
 
    modal.style.display = "block"; 
 
    modalImg.src = this.src; 
 
    captionText.innerHTML = this.alt; 
 
} 
 

 
// Get the <span> element that closes the modal 
 
var span = document.getElementsByClassName("close")[0]; 
 

 
// When the user clicks on <span> (x), close the modal 
 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
} 
 

 
</script>

Answer 1

Вместо того, чтобы вновь делать что-то вроде этого, почему бы не попробовать что-то, что работает? Выполняя что-то очень похожее на то, что вы хотите сделать, я использовал Blueimp gallery. Он был прост в настройке, и предыдущие/следующие кнопки работают, в том числе с помощью клавиш со стрелками и на мобильном устройстве.

Answer 2

Как предложил Стив Кокранов, лучше использовать некоторые библиотеки для достижения того, что вы хотите сделать, но если вы просто планируете играть с HTML и Javascript, ваши предыдущие/следующие кнопки должны работать точно так же, как кнопка закрытия.

1. Дайте их DOM элемент идентификатор
2. Получить элемент DOM с помощью ID в сценарии
3. Приложить щелчка слушателя
4. Выполните логику предыдущего или следующего действия

<img id="myImg" src="myimage" alt="wjuuuu" width="760" height="478"> 
 

 

 
<!-- The Modal --> 
 
<div id="myModal" class="modal"> 
 
    <span class="close">×</span> 
 
    <img class="modal-content" id="img01"> 
 
    <div id="caption"></div> 
 
    <span id="previous">&lt;</span> 
 
    <span id="next">&gt;</span> 
 
</div> 
 

 
<script> 
 
// Get the modal 
 
var modal = document.getElementById('myModal'); 
 

 
// Get the image and insert it inside the modal - use its "alt" text as a caption 
 
var img = document.getElementById('myImg'); 
 
var modalImg = document.getElementById("img01"); 
 
var captionText = document.getElementById("caption"); 
 
img.onclick = function(){ 
 
    modal.style.display = "block"; 
 
    modalImg.src = this.src; 
 
    captionText.innerHTML = this.alt; 
 
} 
 

 
// Get the <span> element that closes the modal 
 
var span = document.getElementsByClassName("close")[0]; 
 

 
// When the user clicks on <span> (x), close the modal 
 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
} 
 

 
// Get the previous button 
 
var previous = document.getElementById('previous'); 
 
previous.onclick = function() { 
 
    /* your logic here */ 
 
} 
 

 
// Get the next button 
 
var next = document.getElementById('next'); 
 
next.onclick = function() { 
 
    /* your logic here */ 
 
} 
 
</script>

Поскольку мы не знаем, откуда взялись изображения, мы не можем реализовать предыдущие и следующие функции для вас. Надеюсь, это поможет.