• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bildergalerie horizontal: Bei Mouseover vergrössertes Bild unterhalb der Bildergalerie anzeigen

S

Sarika

Neues Mitglied
Hallo zusammen,

ich bin etwas verzweifelt, auch nach 2 Tagen Suche im Internet finde ich nicht die richtige Lösung. Ich bin total neu in der Website Programmierung und mache gerade einen Kurs im Multimedia Bereich.
Dafür muss ich eine Website nachbauen, in der unter anderem eine Bildergalerie von 5 kleinen Bildern horizontal angezeigt wird und bei Mouseover das jeweilige Bild unterhalb der Bildergalerie in original Grösse erscheint. Das soll mit Javascript umgesetzt werden. Ich habe ein Screenshot vom "Soll-Zustand" angehängt.
Die Bilder habe ich horizontal hinbekommen aber irgendwie bekomme ich das vergrösserte Bild nicht unterhalb angezeigt.

Gibt es vielleicht jemanden, der mir eine Lösung aufzeigen kann.
Danke für eure Hilfe :smile:
Sarika


1704495376684.png
 
Guten Morgen Sarika,
da gibt es sicher einige, die dir bei der Lösung helfen können. Poste einfach das HTML und CSS, das Du bisher hast.
 
Guten Morgen Sempervivum,

vielen Dank für die schnelle Antwort.
Ich hatte versucht, das Bild mit einer Lightbox umzusetzen, so ist noch das HTML, CSS und Javascript aufgebaut.

Hier das HTML

HTML: 
 <main id="main">
        <div class="content">
        <div id="bild-container">
            <div class="bild-wrapper">
              <img src="Images/Rohkostsalat-sm.jpg" alt="Rohkostsalat">
            </div>
            <div class="bild-wrapper">
              <img src="images/Risotto-sm.jpg" alt="Risotto">
            </div>
            <div class="bild-wrapper">
              <img src="images/Spargel-sm.jpg" alt="Spargel">
            </div>
            <div class="bild-wrapper">
                <img src="images/Thunfisch-sm.jpg" alt="Tunfisch">
              </div>
              <div class="bild-wrapper">
                <img src="images/Pasta-sm.jpg" alt="Pasta">
              </div>
        </div>
        </div>
        <div id="lightbox"></div>

        <aside id="aside">
            <div class="öffnungszeiten">
            <h3>Unsere Öffnungszeiten</h3>
            <p>Dienstag- Sonntag
                <br>
               11:00 bis 14:30 Uhr und
               <br>
               18.00 bis 24.00 Uhr
               <br>
                Mittwoch
                <br>
                17:30 bis 23:30
                <br>
                (Unsere Küche ist bis 23 Uhr geöffnet)
                <br>
                Wir freuen uns auf Ihren Besuch!
            </div>
        </aside>
    </main>

und CSS:

CSS: 
#main {
    display: flex;
    width: 100%;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
}

.content {
    background-color: #ffffff;
    flex: 1;
}

#bild-container {
    display: flex;
    align-items: left;
    gap: 0.2rem;
}
    
#bild-container img {
    width: 70px;
    height: 40px;
    object-fit: cover;
}
    
#lightbox {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease-in;
}
    
#lightbox.zeigen {
    background-color: rgba(0, 0, 0, 0.85);
    opacity: 1;
    visibility: visible;
}
    
#lightbox img {
    max-width: 90%;
}

#lightbox .schliessen {
    cursor: pointer;
        position: absolute;
    top: 1rem;
    right: 3rem;
    color: white;
    font-size: 2rem;
}

    /*aside*/
#aside {
    background-color: #c7c7c6;
    margin-left: 1rem;
    width: 30%;
    font-size: 0.8rem;
    /*padding: 0.5rem;*/
}

.öffnungszeiten {
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: 2rem;
}

Javascript:

Javascript: 
let bildContainer = document.querySelector("#bild-container");
let lightbox = document.querySelector("#lightbox");

bildContainer.addEventListener("click", function(evt) {
let bildWrapper = evt.target.closest(".bild-wrapper");
if (bildWrapper) {
let bild = bildWrapper.querySelector("img");
if (bild) {
lightbox.innerHTML = `<div class="schliessen">X</div>
${bild.outerHTML}`;
lightbox.classList.add("zeigen");
}
}
});

lightbox.addEventListener("click", function(evt) {
if (!evt.target.hasAttribute("src")) {
lightbox.classList.remove("zeigen");
}
});

Vielen Dank
Sarika
 
Sehr schön, dass Du das gleich in Codetags gepostet hast, und auch vom Code her sieht es gut aus und funktioniert einwandfrei, wenn ich damit eine Testdatei mache.
Auch die Lightbox funktioniert einwandfrei und ich habe mich zunächst gefragt, was die verbleibenden Problem sind. Aber Du schreibst:
Die Bilder habe ich horizontal hinbekommen aber irgendwie bekomme ich das vergrösserte Bild nicht unterhalb angezeigt.
Zum Vergrößern anklicken....
Das heißt, die Lightbox ist wunderbar aber entspricht leider nicht der Aufgabenstellung.
Wenn Du eine Lösung in dem Sinne haben willst, wird es viel einfacher:
Einfach einen Container unterhalb der Bilderreihe anlegen, auf die Lightbox kannst Du dann verzichten:
Code: 
    <main id="main">
        <div class="content">
            <div id="bild-container">
                <div class="bild-wrapper">
                    <img src="images/dia0.jpg" alt="Rohkostsalat">
                </div>
                <div class="bild-wrapper">
                    <img src="images/dia1.jpg" alt="Risotto">
                </div>
                <div class="bild-wrapper">
                    <img src="images/dia2.jpg" alt="Spargel">
                </div>
                <div class="bild-wrapper">
                    <img src="images/dia3.jpg" alt="Tunfisch">
                </div>
                <div class="bild-wrapper">
                    <img src="images/dia4.jpg" alt="Pasta">
                </div>
            </div>
            <div id="bild-container-groß"></div>
        </div>
        <!-- <div id="lightbox"></div> -->

        <aside id="aside">
Versuche selbst, das Javascript umzuändern. Schließen-Button brauchst Du gar nicht mehr.
 
PS: Was das "untereinander anordnen" betrifft: div-Elemente sind Blockelemente und die nehmen ohne weitere Maßnahmen die volle Breite ein und werden untereinander angeordnet.
 
Hallo,

vielen Dank für eure schnelle Hilfe. Entschuldigt, dass ich mich erst jetzt melde, ich war privat sehr eingespannt und komme jetzt erst wieder an meine Prüfungsaufgaben.

Das Ergebnis ist leider noch nicht das, was vorgegeben ist.

Ich hatte es so gemacht wie Sempervivum gesagt hat und das hat auch geklappt.
Jetzt habe ich erfahren, dass ich die kleine Version der Bilder und die grosse Version der Bilder nutzen muss. Das bekomme ich irgendwie nicht hin, der Wechsler läuft nicht.

Kann mir vielleicht nochmal jemand helfen?

Vielen Dank für eure Hilfe :smile:
Sarika

Ich habe hier die aktuellen Codes angehängt.
HTML: 
<main id="main">
        <div class="content">
           <div id="bild-container">
                <div class="bild-wrapper">
                    <img src="Images/Rohkostsalat-sm.jpg" alt="Rohkostsalat">
                </div>
                <div class="bild-wrapper">
                    <img src="images/Risotto-sm.jpg" alt="Risotto">
                </div>
                <div class="bild-wrapper">
                    <img src="images/Spargel-sm.jpg" alt="Spargel">
                </div>
                <div class="bild-wrapper">
                    <img src="images/Thunfisch-sm.jpg" alt="Tunfisch">
                </div>
                <div class="bild-wrapper">
                    <img src="images/Pasta-sm.jpg" alt="Pasta">
                </div>
            </div>
            <div id="bild-container-gross">
                <div class="bild-wrapper-gross">
                    <img src="Images/Rohkostsalat.jpg" alt="Rohkostsalat">
                </div>
                <div class="bild-wrapper">
                    <img src="images/Risotto.jpg" alt="Risotto">
                </div>
                <div class="bild-wrapper">
                    <img src="images/Spargel.jpg" alt="Spargel">
                </div>
                <div class="bild-wrapper">
                    <img src="images/Thunfisch.jpg" alt="Tunfisch">
                </div>
                <div class="bild-wrapper">
                    <img src="images/Pasta.jpg" alt="Pasta">
                </div>
            </div>
        </div>
        

        <aside id="aside">
            <div class="öffnungszeiten">
            <h3>Unsere Öffnungszeiten</h3>
            <p>Dienstag- Sonntag
                <br>
               11:00 bis 14:30 Uhr und
               <br>
               18.00 bis 24.00 Uhr
               <br>
                Mittwoch
                <br>
                17:30 bis 23:30
                <br>
                (Unsere Küche ist bis 23 Uhr geöffnet)
                <br>
                Wir freuen uns auf Ihren Besuch!
            </div>
        </aside>
    </main>
CSS: 
#main {
    display: flex;
    width: 100%;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
}

.content {
    background-color: #ffffff;
    flex: 1;
}

#bild-container {
    display: flex;
    align-items: left;
    gap: 0.2rem;
}
    
#bild-container img {
    width: auto;
    height: auto;
    object-fit: cover;
}

#bild-container-gross img{
    width: auto;
    height: auto;
}

    /*aside*/
#aside {
    background-color: #c7c7c6;
    margin-left: 1rem;
    width: 30%;
    font-size: 0.8rem;
    /*padding: 0.5rem;*/
}

.öffnungszeiten {
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: 2rem;
}
Javascript: 
let bildContainer = document.querySelector("#bild-container");
let bildContainergross = document.querySelector("#bild-container-gross");

bildContainer.addEventListener("mouseover", function (evt) {
let bildWrapper = evt.target.closest(".bild-wrapper");
if (bildWrapper) {
let bild = bildWrapper.querySelector(".bild-wrapper-gross img");
if (bild) {
bildContainergross.innerHTML = `${bild.outerHTML}`;
bildContainergross.classList.add("zeigen");
}
}
});

bildContainergross.addEventListener("mouseover", function(evt) {
if (!evt.target.hasAttribute("src")) {
bildContainergross.classList.remove("zeigen");
}
});
 
Hallo Sarika, willkommen zurück!
Du willst ja immer nur ein Bild in groß anzeigen, nicht wahr? Dann brauchst Du nicht alle Bilder in den Container für das große einzutragen sondern nur eines. Und statt das gesamte HTML auszutauschen mit
bildContainergross.innerHTML = `${bild.outerHTML}`;
tauschst Du nur das src-Attribut aus, damit das neue Bild angezeigt wird.
Du musst jedoch den Dateinamen des Bildes umändern, d. h. das "-sm" entfernen. Das kannst Du mit replace machen.
www.w3schools.com

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com
Versuche, ob Du mit diesen Hinweisen zum Ziel kommst und melde dich wieder, wenn nicht.
 
Hallo Sempervivum,
vielen Dank für die schnelle Antwort.
Irgendwie stehe ich mit Javascript auf dem Kriegsfuss.... HTML und CSS verstehe ich inzwischen ganz gut aber Javascript kommt (bisher) nicht zur Umsetzung in meinem Gehirn an!
Ich habe jetzt folgendes Javascript aber das funktioniert immer noch nicht, etwas mache ich falsch...
Habe auch noch das geänderte HTML angehängt.

Viele Grüsse von der etwas verzweifelten :confused:
Sarika

Javascript: 
let bildContainer = document.querySelector("#bild-container");
let bildContainergross = document.querySelector("#bild-container-gross");

bildContainer.addEventListener("mouseover", function (evt) {
let bildWrapper = evt.target.closest(".bild-wrapper");
if (bildWrapper) {
[CODE=html]<main id="main">
        <div class="content">
           <div id="bild-container">
                <div class="bild-wrapper">
                    <img src="Images/Rohkostsalat-sm.jpg" alt="Rohkostsalat">
                </div>
                <div class="bild-wrapper">
                    <img src="images/Risotto-sm.jpg" alt="Risotto">
                </div>
                <div class="bild-wrapper">
                    <img src="images/Spargel-sm.jpg" alt="Spargel">
                </div>
                <div class="bild-wrapper">
                    <img src="images/Thunfisch-sm.jpg" alt="Tunfisch">
                </div>
                <div class="bild-wrapper">
                    <img src="images/Pasta-sm.jpg" alt="Pasta">
                </div>
            </div>
            <div id="bild-container-gross">
                <div class="bild-wrapper-gross">
                    <img src="Images/Rohkostsalat.jpg" alt="Rohkostsalat">
                </div>
            </div>
        </div>
        

        <aside id="aside">
            <div class="öffnungszeiten">
            <h3>Unsere Öffnungszeiten</h3>
            <p>Dienstag- Sonntag
                <br>
               11:00 bis 14:30 Uhr und
               <br>
               18.00 bis 24.00 Uhr
               <br>
                Mittwoch
                <br>
                17:30 bis 23:30
                <br>
                (Unsere Küche ist bis 23 Uhr geöffnet)
                <br>
                Wir freuen uns auf Ihren Besuch!
            </div>
        </aside>
    </main>
let bild = bildWrapper.querySelector(".bild-wrapper-gross img");
if (bild) {
bildContainergross.innerHTML = bild.src;
let imggross = document.getElementById("bild-container-gross");
document.getElementById("bild-container-gross") = imggross.replace("-sm", "");
bildContainergross.classList.add("zeigen");
}
}
});

bildContainergross.addEventListener("mouseover", function(evt) {
if (!evt.target.hasAttribute("src")) {
bildContainergross.classList.remove("zeigen");
}
});[/CODE]
 
Ups, da ist was schief gegangen, hier der Javascript Code
Javascript: 
let bildContainer = document.querySelector("#bild-container");
let bildContainergross = document.querySelector("#bild-container-gross");

bildContainer.addEventListener("mouseover", function (evt) {
let bildWrapper = evt.target.closest(".bild-wrapper");
if (bildWrapper) {
let bild = bildWrapper.querySelector(".bild-wrapper-gross img");
if (bild) {
bildContainergross.innerHTML = bild.src;
let imggross = document.getElementById("bild-container-gross");
document.getElementById("bild-container-gross") = imggross.replace("-sm", "");
bildContainergross.classList.add("zeigen");
}
}
});

bildContainergross.addEventListener("mouseover", function(evt) {
if (!evt.target.hasAttribute("src")) {
bildContainergross.classList.remove("zeigen");
}
});
 
Hallo Sarika, ich habe das Javascript mal umgearbeitet, so wie ich meine, dass es aussehen müsste, aber ungetestet:
Code: 
        const bildContainer = document.querySelector("#bild-container");
        // Das grosse Bild:
        const bildGross = document.querySelector("#bild-container-gross img");

        bildContainer.addEventListener("mouseover", function (evt) {
            // Zunächst prüfen wir, ob das Hover in dem Wrapper mit den
            // kleinen Bildern statt gefunden hat:
            let bildWrapper = evt.target.closest(".bild-wrapper");
            if (bildWrapper) {
                // Kleines Bild bereit stellen:
                let bildKlein = bildWrapper.querySelector("img");
                if (bildKlein) {
                    // src-Attribut des kleinen Bildes bereit stellen:
                    bildKleinSrc = bildKlein.src;
                    // Das große Bild haben wir schon, wir brauchen nur noch
                    // das src-Attribut dort eintragen und vorher das "_sm" entfernen:
                    bildGross.src = bildKleinSrc.replace("-sm", "");
                }
            }
        });

        // Ich bin der Meinung, dass wir dies nicht brauchen,
        // wir muessen ja nur beim Hover das jeweilige Bild
        // in den Container für das große Bild eintragen:
        // bildContainergross.addEventListener("mouseover", function (evt) {
        //     if (!evt.target.hasAttribute("src")) {
        //         bildContainergross.classList.remove("zeigen");
        //     }
        // });
Damit Du verstehst, was vor sich geht, habe ich Kommentare eingetragen. Weil in den ersten beiden Zeile die Elemente bereit gestellt werden, muss sicher gestellt sein, dass diese auch schon vorhanden sind. Das ist der Fall, wenn Du das Javascript an das Ende des body, vor das schließende </body> stellst.

Man könnte noch anmerken, dass als Wrapper für ein img das figure-Tag besser geeignet ist. Und beim großen Bild könnte man auf einen Wrapper verzichten. Aber das wäre der nächste Schritt, erst Mal das JS zum Laufen bringen, damit die Anzeige überhaupt funktioniert.
 
Super, das klappt einwandfrei! Vielen herzlichen Dank :smile:
Auch für die verständliche Erklärung, das hilft mir sehr zu verstehen.
Hatte ich das Script viel zu kompliziert geschrieben...
Ich habe für das Javascript eine Extra Datei und diese in den head der HTML Datei gesetzt, geht das auch?
HTML: 
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Musterseite</title>
<link href="galerie.css" rel="stylesheet">
<script src="galerie.js" defer></script>
</head>

Hier habe ich das geänderte HTML mit figure-Tag und dem entfernten Wrapper beim großen Bild angehängt.
Code: 
<main id="main">
        <div class="content">
           <figure id="bild-container">
                <div class="bild-wrapper">
                    <img src="Images/Rohkostsalat-sm.jpg" alt="Rohkostsalat">
                </div>
                <div class="bild-wrapper">
                    <img src="images/Risotto-sm.jpg" alt="Risotto">
                </div>
                <div class="bild-wrapper">
                    <img src="images/Spargel-sm.jpg" alt="Spargel">
                </div>
                <div class="bild-wrapper">
                    <img src="images/Thunfisch-sm.jpg" alt="Tunfisch">
                </div>
                <div class="bild-wrapper">
                    <img src="images/Pasta-sm.jpg" alt="Pasta">
                </div>
            </figure>
            <figure id="bild-container-gross">
                <img src="Images/Rohkostsalat.jpg" alt="Rohkostsalat">
            </figure>
            </div>
        </div>
        

        <aside id="aside">
            <div class="öffnungszeiten">
            <h3>Unsere Öffnungszeiten</h3>
            <p>Dienstag- Sonntag
                <br>
               11:00 bis 14:30 Uhr und
               <br>
               18.00 bis 24.00 Uhr
               <br>
                Mittwoch
                <br>
                17:30 bis 23:30
                <br>
                (Unsere Küche ist bis 23 Uhr geöffnet)
                <br>
                Wir freuen uns auf Ihren Besuch!
            </div>
        </aside>
    </main>
 
Für die extra-Javascript-Datei gilt das selbe: Vor dem schließenden </body> einbinden, damit die Elemente sicher existieren, auf die das Skript zugreift.
Freut mich, dass Du meinen Vorschlag mit dem figure-Tag aufgegriffen hast, das HTML hatte ich mir genau so vorgestellt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben