• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Modal box ze zdjęciem nie pokazuje się

VPS Starter Arubacloud
0 głosów
208 wizyt
pytanie zadane 4 sierpnia 2016 w HTML i CSS przez alus152 Bywalec (2,690 p.)

Witam, po mału kończę już moją stronę ale mam kłopot bo próbowałem zrobić galerię 9 zdjęć z wyskakującym okienkiem i robię to z poradnika ale najpierw pokażę kod: 

<div id="galeria">
				<img id="myImg" src="images/norway.jpeg" alt="Trolltunga, Norway" width="300" height="200">
				<img id="myImg" src="images/norway.jpeg" alt="Trolltunga, Norway" width="300" height="200">
				<img id="myImg" src="images/norway.jpeg" alt="Trolltunga, Norway" width="300" height="200"> <br>
				<img id="myImg" src="images/norway.jpeg" alt="Trolltunga, Norway" width="300" height="200">
				<img id="myImg" src="images/norway.jpeg" alt="Trolltunga, Norway" width="300" height="200">
				<img id="myImg" src="images/norway.jpeg" alt="Trolltunga, Norway" width="300" height="200"> <br>
				<img id="myImg" src="images/norway.jpeg" alt="Trolltunga, Norway" width="300" height="200">
				<img id="myImg" src="images/norway.jpeg" alt="Trolltunga, Norway" width="300" height="200">
				<img id="myImg" src="images/norway.jpeg" alt="Trolltunga, Norway" width="300" height="200">
				<div id="myModal" class="modal">
					<div id="myModal" class="modal">
  					<span class="close">×</span>
  					<img class="modal-content" id="img01">
  					<div id="caption"></div>
</div>

				<span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>

				<div id="caption"></div>
				<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;
    modalImg.alt = this.alt;
    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>

		</div>
		</div>


	</div>
/* Style the Image Used to Trigger the Modal */
#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 (Image Text) - Same Width as the Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */
.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%;
    }
}

i ogólnie zdjęcie w miniaturce wygląda ok ale po kliknięciu jest czarny prześwitujący ekran ale bez obrazka powiększonego, co jest nie tak?

2 odpowiedzi

0 głosów
odpowiedź 4 sierpnia 2016 przez Nephalem Nowicjusz (140 p.)
Piszę z telefonu więc nie sprawdzę działania kodu ale pierwsze co zauważyłem to, że dla każdego tagu img dodajesz atrybut id o takiej samej nazwie. Id musi mieć unikalną nazwę. Niech zgadnę w tutorialu był tylko jeden obrazek? Już widzę, że trzeba lekko zmodyfikować też kod js jak chcesz mieć w galerii kilka obrazków. Napisz czy potrzebujesz jeszcze pomocy czy dasz sobie rade. Moge pomóc ale dopiero wieczorem.
komentarz 4 sierpnia 2016 przez alus152 Bywalec (2,690 p.)
Co do id to wiem i jest tak zrobione roboczo bo duplikowalem linijki i zamienie na class. O jakich poprawkach w js mowisz?
0 głosów
odpowiedź 4 sierpnia 2016 przez xmentor Nałogowiec (49,520 p.)
edycja 4 sierpnia 2016 przez xmentor
komentarz 4 sierpnia 2016 przez alus152 Bywalec (2,690 p.)
To prawda jest z tej strony w sumie wygladala na normalna ale juz wiem ze to shit pozdrawiam :)

Podobne pytania

0 głosów
1 odpowiedź 121 wizyt
pytanie zadane 26 marca 2017 w HTML i CSS przez ShadoWs Bywalec (2,800 p.)
+1 głos
6 odpowiedzi 159 wizyt
pytanie zadane 8 lipca 2020 w HTML i CSS przez Szarlotka Użytkownik (890 p.)
0 głosów
3 odpowiedzi 578 wizyt
pytanie zadane 11 maja 2017 w HTML i CSS przez Prime_Bull Obywatel (1,820 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...