Visualizzatore immagini

Question

Pochi posts

Iscritto da: ott, 2020

Messaggi:: 31

Visualizzatore immagini

23 ott 2020, 10:33

Salve a tutti, di solito non mi rivolgo mai ai forum, cerco di dare una mano dove posso, ma questa volta mi sono arreso, non essendo pratico di jscript devo cercare un aiuto.
Sto cercando di scrivere in bootstrap un visualizzatore di immagini, prese in random da una cartella con uno script in PHP.
Cliccando sopra la foto deve aprire un popup modal e ingrandirla, con la prima funziona bene, ma solo con quella, dalla seconda in poi non riesco proprio.
Provo a postare il codice che ho reso essenziale, in modo che con un copia/incolla funzioni, spero in un vs. aiuto perchè mi piace questa soluzione ma mi sta facendo perdere tempo. Grazie.


<?php
$nome =array('slide-ss/autunno.JPG' , 'slide-ss/al teatro.JPG' , 'slide-ss/candelieri 2.JPG' ) ;
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#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%;
  }
}
</style>
<!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>

<h2>Prova visualizzatore immagini </h2>


<section class="property-grid grid">
      <div class="container">
  
            
          <div class="row">
                            <div class="col-md-4">
                                    <div class="card mb-4 box-shadow">
                                      <img  id="myImg" class="card-img-top" src="<?=$nome[0];?>" alt="<?=$nome[0];?>" title="<?=$nome[0];?>">
                                      <div class="card-body">
                                        <p class="card-text">immagine numero 0.</p>
                                      </div>
                                    </div>
                               </div>
              <div class="col-md-4">
                                    <div class="card mb-4 box-shadow">
                                      <img  id="myImg" class="card-img-top" src="<?=$nome[1];?>" alt="<?=$nome[1];?>" title="<?=$nome[1];?>">
                                      <div class="card-body">
                                        <p class="card-text">immagine numero 1.</p>
                                        
                                      </div>
                                    </div>
                               </div>
              <div class="col-md-4">
                                    <div class="card mb-4 box-shadow">
                                      <img  id="myImg" class="card-img-top" src="<?=$nome[2];?>" alt="<?=$nome[2];?>" title="<?=$nome[2];?>">
                                      <div class="card-body">
                                        <p class="card-text">immagine numero 2.</p>
                                        
                                      </div>
                                    </div>
                               </div>
             
              
          </div>          <!--  row -->
         
                                    <!-- The Modal -->
                                    <div id="myModal" class="modal">
                                          <span class="close">&times;</span>
                                                  <img class="modal-content" id="img01">
                                          <div id="caption"></div>
                                    </div>
                              
     
      </div>
</section>

<script>

var modal = document.getElementById("myModal");

//  prende l'immagine e la inserisce nel modal usando il tag "alt" ma modalImg mi rimane sempre ad 1 non so come gestirlo.
 
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;
}
 
var span = document.getElementsByClassName("close")[0];

span.onclick = function() { 
  modal.style.display = "none";
}
</script>

</body>
</html>

Visualizzatore immagini

Visualizzatore immagini

1 Risposte

Re: Visualizzatore immagini