jquery - Bilder einzeln ansprechen scheitert (Lightbox)

html.de-Forum JavaScript
1

Hallo Community,

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

Dazu der hier der jquery-Teil:

[CODE]$(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');
                            });
                    }[/CODE]

Dann der HTML-Teil:
[HTML]
brot1

Schliessen
Bauernbrot

brot1

Schliessen
Bauernbrot
[/HTML]

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… :confused:

Mit freundlichen Grüßen

2

$(this)