[ERLEDIGT] Bild Vorschau funktioniert nicht!

[Peterneu27]

Hallo Liebe Community,

Ich habe folgendes Problem:
Es geht darum , dass ich gerne wenn man ein Bild anklick eine Vorschau bekommt und dann sich der Hintergrund verdunkelt. Dies habe ich auch ohne probleme hinbekommen, doch als ich dass selbe auf ein anderes Bild anwenden wollte bin ich kläglich gescheitert. Den Code habe ich in dem beitrag unten eingefügt!
-------------------------------------------------------------------
Html:
<img id="myImg" class="image image-full" src="images/preview03.png" alt="Preview03" width="282" height="180">
<div id="myModal" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<h3>News 3</h3>
<p>Hier könnte ihre Werbung stehen oder unser Text 3</p>
<a href="images/preview03.png" target="_blank" class="button button-small">Hier lesen!</a> </div>
-------------------------------------------------------------------
Script:
<script>
var modal = document.getElementById('myModal');
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>
-------------------------------------------------------------------
Css:
/* 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 {
animation-name: zoom;
animation-duration: 0.6s;
}

@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%;
}
}
-------------------------------------------------------------------
Ich hoffe auf eine Lösung!
Mfg Peter Neuhausen

 

[Peterneu27]

Dafür gibt es mehrere vorgefertigte Scripts, die ausgereift und vielfältig konfigurierbar sind, z. B. Fancybox.
An anderer Stelle habe ich dazu geschrieben:

Das script ist ja eins dieser Besagten Vorgefertigten sonnst würde ich hier nicht Fragen. Brauche das halt nur für 4 Bilder. Preview01-04. Aber was würde sich sonnst als besseres Script erweisen? Das obenstehende ist von hier: https://www.w3schools.com/howto/howto_css_modal_images.asp
https://www.w3schools.com/howto/howto_css_modal_images.asp

 

[Aaron3219]

Tja, dass Problem bei Vanilla-Javascript...
das Problem ist, dass Javascript immer nur die erste ID findet oder die erste Class, solange du keine Schleife laufen lässt (for, forEach, etc.).
Hier ist also das überarbeitete Javascript:

var modal = document.getElementById('myModal');
var img = document.querySelectorAll('#myImg'); //Geändert!!!!
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");


img.forEach(function (elem) {
    elem.addEventListener("click", function() {
      var source = elem.src;
      img.forEach(function (elem) {
        modal.style.display = "block";
      modalImg.src =  source;
      captionText.innerHTML = elem.alt;
      });
  });
});


var span = document.getElementsByClassName("close")[0];

span.onclick = function() {
modal.style.display = "none";
}

Edit:
Prinzipiell hat Sempervivum eigentlich recht, aber als Übung ist es schon gut genug. Ich mach auch lieber meine Dinge selber.

 

[Peterneu27]

Vielen Dank für die schnelle Hilfe. Es funktioniert!

 

[Aaron3219]

Nun ja, eine for-Schleife kann es auch tun.
Aber meiner Meinung nach muss auf den Internet Explorer Support nur ein bisschen Wert gelegt werden, da er ja eh nicht mehr weiter entwickelt wird.
Ich verstehe sowieso nicht, warum immer noch 4% der deutschen (Info aus CanIUse) den IE benutzen.

Wie soll es denn in 10 Jahren aussehen? Man kann ja nicht immer CSS und JS von vor 10 Jahren nehmen, nur weil IE mal wieder seine Probleme hat.

Fazit also:
Noch sollte (wenigstens ein bisschen) Wert auf IE gelegt werden, doch ich hoffe, dass in ein paar Jahren, der IE entgültig abgeschafft ist!

 

[Peterneu27]

Aber meiner Meinung nach muss auf den Internet Explorer Support nur ein bisschen Wert gelegt

Die Seite wird auch nicht auf dem IE Laufen, dann bekommt man die Meldung: "Bitte nutzen sie einen anderen Browser, da sonnst schwierigkeiten beim anzeigen der Seite auftreten könnten!"

Daher ist es mir relativ ob die Inhalte mit IE kompatibel oder nicht sind. Und da dies eh nur zu demonstrations zwecken dient reicht dass vollkommen aus.

 

[Peterneu27]

Nochmal eine Kurze Frage ich habe noch das Problem das die "alt" texte unter den Bildern wiedergegeben werden sollen doch dies funktioniert nur bei dem Letzten Text welcher dann bei allen auftaucht

 

[Aaron3219]

Tja, dass Problem bei Vanilla-Javascript...
das Problem ist, dass Javascript immer nur die erste ID findet oder die erste Class, solange du keine Schleife laufen lässt (for, forEach, etc.).

selbiges gilt für den alt-Text. Er nimmt nur den alt-Text des ersten Elementes das er findet.

 

[Peterneu27]

Ok vielen Dank