jquery - Bilder einzeln ansprechen scheitert (Lightbox)

[Yo_Low]

Hallo Community,

ich versuche derzeit (kleinere Bilden) durch eine Lightbox nochmals größer darzustellen. (auf Klick)

Dazu der hier der jquery-Teil:

$(document).ready(function(){

                                $('.lightbox').click(function(){
                                        $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
                                        $('.box').animate({'opacity':'1.00'}, 300, 'linear');
                                        $('.backdrop, .box').css('display', 'block');
                                });

                                $('.close').click(function(){
                                        close_box();
                                });

                                $('.backdrop').click(function(){
                                        close_box();
                                });

                        });

                        function close_box()
                        {
                                $('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
                                        $('.backdrop, .box').css('display', 'none');
                                });
                        }

Dann der HTML-Teil:

  <a href="#" class="lightbox"><img src="images/brot1_s.jpg" alt="brot1"></a>

<div class="backdrop"></div>
<div class="box">
     <div class="close">Schliessen</div>
     <img src="images/brot1.jpg" alt="Bauernbrot" style="width: 100%; height: 100%;">
</div>

  <a href="#" class="lightbox"><img src="images/brot1_s.jpg" alt="brot1"></a>

<div class="backdrop"></div>
<div class="box">
     <div class="close">Schliessen</div>
     <img src="images/brot1.jpg" alt="Bauernbrot" style="width: 100%; height: 100%;">
</div>

Die Elemente werden mit Hilfe von CSS über .backdrop, .box und .close designt. Die Verbindung zu jquery besteht. Es funktioniert auch halbwegs. Leider werden aber damit alle Bilder gleichzeitig angesprochen (überlappen sich). Es soll natürlich nur das Bild vergrößert angezeigt werden, welches auch angeklickt wurde. Probierte bereits 'this' als Target, was leider nicht funktionierte oder ich es einfach nicht anständig verwenden konnte..

Mit freundlichen Grüßen

 

[Tronjer]

$(this)