Ich möchte ein Bild mit Lupensymbol versehen.

(Ja ich weiß es gibt schon nen Post, aber der hilft mir nicht weiter)

Ich hätte mir dazu folgendes zusammengebastelt, allerdings funktioniert das ganze nicht.

PHP-Code:

    $('a.lupe').wrap('<div class="lupeaussen" />');
    $('div.lupeaussen').each(function(){
      var bildbreite = $('.lupeaussen').children('img').width();
      var bildbreite = bildbreite;
      $(this).css("width",bildbreite);    
    }); 
    $('.lupe').wrap('<div class="bild" />'); 


Das Bild dazu sieht so aus:

HTML-Code:

<a href="bild-gross.jpg" class="lupe"><img src="bild-klein.jpg" width="139" height="200"  /></a>

Das Problem ist, das Wrap wird irgendwie nicht übernommen.
Ich hab im Firefox 6 und im IE 9 geguckt.

...keine Ahnung ob's damit zu tun hat, aber 2 mal wird var bildbreite definiert?

So - bin ein kleines Stück weiter - aber eine Schwierigkeit besteht noch:

PHP-Code:

$('a.lupe').wrap('<div class="lupeaussen" />');
        
        $('div.lupeaussen').each(function(){
                                
            var bildbreite = $('a.lupe').children('img').width();
            
            $(this).css({
                "width": bildbreite,
                "position": "relative"
            });   
        }); 
        
        $('div.lupeaussen').append('<div class="bild"></div>'); 


Wenn ich das ganze so mache dann passiert folgendes, es wird die Breite vom 1. Bild verwendet (Bilder können verschiedene Breiten haben) und nimmt es für alle anderen Bilder ebenfalls her.

Ich würd gern, das per Script so ändern, dass automatisch eine ID für jedes .lupe-Element erstellt wird und die Bildbreite dann je nach ID errechnet wird.

Hab schon bißchen rumprobiert, aber bin noch auf keine Lösung gekommen.