Aggiungi i pulsanti successivo e precedente quando apro il modale

Sono un principiante e volevo chiedere se puoi aiutarmi ad aggiungere i pulsanti precedente e successivo al mio modal. Le immagini non sono in forma di galleria. Devo aggiungere div o solo così e aggiungere qualche javascript? Puoi suggerirne qualcuno?

var modal = document.getElementById('myModal'); var img = $('.myImg'); var modalImg = $("#img01"); var captionText = document.getElementById("caption"); $('.myImg').click(function(){ modal.style.display = "block"; var newSrc = this.src; modalImg.attr('src', newSrc); captionText.innerHTML = this.alt; }); var span = document.getElementsByClassName("close")[0]; span.onclick = function() { modal.style.display = "none"; } 
 .myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } .myImg:hover {opacity: 0.7;} .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); } .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; } #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } .modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)} } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } @media only screen and (max-width: 700px){ .modal-content { width: 100%; } } .nvgt{ position:absolute; top: 120px; height: 50px; width: 30px; opacity: 0.6; } .nvgt:hover{ opacity: 0.9; } #prev{ background: #000 url('./image/prev.png') no-repeat center; left: 0px; } ul { list-style-type: none; } ul li { display: inline-block; background:white; margin-bottom:10px; } 
 
  • Grumpy Cat Paintball
  • DJ Cat
  • Sorcerer Supreme
  • Rambo
  • Laser Vision

Dovrebbe assomigliare a questo:

inserisci la descrizione dell'immagine qui

Ecco qua …

 < !doctype html>   Boostrap modal prev and next button           


  • Grumpy Cat Paintball
    Description
  • DJ Cat
    Description
  • Sorcerer Supreme
    Description
  • Rambo
    Description
  • Laser Vision
    Description

Trovando la sorgente di immagine successiva / precedente, è ansible navigare tra le immagini utilizzando la funzione .next() e .prev() in js.

Prima prendi l’attributo source della tua immagine attuale nel tuo modalImg poi trova l’immagine successiva dal genitore della tua immagine, che è il

  • , e ottieni l’attributo source dell’immagine e sostituiscilo al tuo modalImg per visualizzare il prossimo / immagine precedente.

     $('.next').click(function() { var curr = $(modalImg).attr('src'); var next = $('img[src="' + curr +'"]').parent('li').next().find('img').attr('src'); modalImg.attr('src', next); }); $('.prev').click(function() { var curr = $('modalImg').attr('src'); var prev = $('img[src="' + curr + '"]').parent('li').prev().find('img').attr('src'); modalImg.attr('src', prev); }); 

    Nel tuo modal, aggiungi i pulsanti successivo e precedente

      

    Puoi vedere come funziona in questo jsFiddle .

     var modal = document.getElementById('myModal'); var img = $('.myImg'); var modalImg = $("#img01"); var captionText = document.getElementById("caption"); $('.myImg').click(function(){ modal.style.display = "block"; var newSrc = this.src; modalImg.attr('src', newSrc); captionText.innerHTML = this.alt; }); $('.change_btn').click(function(){ var btn_click = $(this).find('a').html(); var current_src = $('#img01').attr('src'); $('.myImg').each(function(){ if($(this).attr('src') == current_src){ current_index = $(this).parent().index(); if(btn_click == 'prev'){ var new_index = current_index - 1; $('#img01').attr('src',$('li:eq('+new_index+')').find('img').attr('src')); } else if(btn_click == 'Next'){ var new_index = current_index + 1; $('#img01').attr('src',$('li:eq('+new_index+')').find('img').attr('src')); } } }); }); var span = document.getElementsByClassName("close")[0]; span.onclick = function() { modal.style.display = "none"; } 
     .myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } .myImg:hover {opacity: 0.7;} .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); } .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; } #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } .modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)} } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } @media only screen and (max-width: 700px){ .modal-content { width: 100%; } } .nvgt{ position:absolute; top: 120px; height: 50px; width: 30px; opacity: 0.6; } .nvgt:hover{ opacity: 0.9; } #prev{ background: #000 url('./image/prev.png') no-repeat center; left: 0px; } ul { list-style-type: none; } ul li { display: inline-block; background:white; margin-bottom:10px; } .change_btn { text-align:center; font-size:30px; float:left; } 
      
    • Grumpy Cat Paintball
    • DJ Cat
    • Sorcerer Supreme
    • Rambo
    • Laser Vision