Ingrandimento immagini html(photogallery)

Forum di discussione su HTML5, CSS, XHTML, XML, XSL

Moderatore: Toki

Regole del forum
Leggi: IProgrammatori.it - Regolamento Forum
marvelous4
New Entry
Messaggi: 1
Iscritto il: 08 nov 2017, 15:11

Ingrandimento immagini html(photogallery)

Messaggioda marvelous4 » 08 nov 2017, 15:16

Salve a tutti, vorrei sapere come fare per aprire in slide tutte le immagini che possiedo nella galleria? Mi si apre solamente la prima immagine in slide, mentre dalla seconda in poi nello cliccare non si aprono. Vorrei mettere la funzione a tutte le immagini,che si aprano al clic(sono tutte caricate,formando una gallery). Sono in totale 70 immagini.Come potete vedere ci sono due immagini in questo file,ma la prima si apre cliccandoci sopra, mentre la seconda(e di conseguenza le altre immagini che metterei) non si aprono. Non so i parametri da modificare o aggiungere. Grazie anticipatamente.

Codice: Seleziona tutto

<!DOCTYPE html>
<html>
<head>
<style>
#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;
}


/* Add Animation */
.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)}
}


/* The Close Button */
.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;
}


/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}
</style>
</head>
<body>


<img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">
<img id="myImg" src="img_nature_wide.jpg" alt="Nature Wide" width="300" height="200">


<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">&times;</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>


</body>
</html>
Avatar utente
Synthkat
New Entry
Messaggi: 3
Iscritto il: 22 ott 2017, 07:27
Località: Forlì

Re: Ingrandimento immagini html(photogallery)

Messaggioda Synthkat » 14 nov 2017, 18:06

Ciao, non è che magari ti si incasina col fatto che stai usando lo stesso id per le 2 immagini, anziché usare direttamente una classe?
"Continuò a giocare ancora in età adulta e anche per questo apparve talora inquietante e incomprensibile agli occhi dei suoi contemporanei."

[Freud, Un ricordo d’infanzia di Leonardo Da Vinci]

Torna a “HTML e CSS”

Chi c’è in linea

Visitano il forum: Nessuno e 7 ospiti