Problem mit Div-Overlays

[Hellboy]

Hallo zusammen,

ich bastel an meiner Porfolioseite und bin auch schon relativ weit gekommen,
nun hakt es aber leider, und ich komm mit meinen begrenzten Kenntnissen nicht weiter.

Die Website soll folgendermaßen aussehen: Man hat verschiedene Bilder, klickt
man auf ein Bild öffnet sich ein durchsichtiges Div, das den Hintergrund überlagert und
weitere Details (Text und Bilder) zeigt; klickt man wieder, schließt sich das Div.
Die Java-Funktion dazu sieht folgendermaßen aus:

  
<script>  
$(function()  
{  
    $('.masonryImage').click(function()  
    {  
        $('.hiddenDiv').show();  
        $("body").css("overflow", "hidden");  
    });  
    $('.hiddenDiv').click(function()  
    {  
        $('.hiddenDiv').hide();  
        $("body").css("overflow", "auto");  
    });  
});  
</script  

HTML zu den Bildern:

  
<div class="masonryImage">  
        <img src="images/bild1.jpg" alt="">  
</div>  
<div class="hiddenDiv">  
     <div class="text">  
         <p>Lorem ipsum...</p>  
     </div>  
     <div class="bilder">  
         <img src="images/bild2.jpg" alt="">  
      </div>  
</div>  

Problem: Es funktioniert nur mit einem einzigen Bild, füge ich ein weiteres hinzu, zB:

  
<div class="masonryImage">  
        <img src="images/bild3.jpg" alt="">  
</div>  
<div class="hiddenDiv">  
     <div class="text">  
         <p>Lorem ipsum und so...</p>  
     </div>  
     <div class="bilder">  
         <img src="images/bild4.jpg" alt="">  
      </div>  
</div>  

So überlagert dessen Text nun den Ersten, und es werden auch nur noch die Bilder dieses Divs
angezeigt.
Liegt es daran das Alle die gleiche Klasse haben ("masonryImage")?. Oder enfernt das Java, die Divs nicht korrekt?

Vielen Dank für eure Hilfe.

[Matthias Apsel]

Om nah hoo pez nyeetz, Hellboy!

Die Java-Funktion dazu sieht folgendermaßen aus:

verwechsle nicht Java und JavaScript!

Vielleicht solltest du auf eine Fremdlösung, beispielsweise lightbox setzen?

Matthias

[Hellboy]

Om nah hoo pez nyeetz, Hellboy!

Die Java-Funktion dazu sieht folgendermaßen aus:

verwechsle nicht Java und JavaScript!

Vielleicht solltest du auf eine Fremdlösung, beispielsweise lightbox setzen?

Matthias

Danke! Werd ich mir angucken.

[ChrisB]

Hi,

Liegt es daran das Alle die gleiche Klasse haben ("masonryImage")?

Ja – aber nicht an dieser Klasse, sondern an der Klasse "hiddenDiv".

Mit $('.hiddenDiv').show() machst du bei jedem Klick auf ein Bild *alle* davon auf einmal sichtbar.

Schau also, mit welchem Selektor/sonstigen Funktionen jQuery es dir erlaubt, nur das jeweils dem geklickten Bild direkt folgende Element mit dieser Klasse zu selektieren.

MfG ChrisB