Bildnamen und zu Link zu machen aus <img> mit jQuery

Question

Mit jQuery, mag ich Alle Bilder unter einem bestimmten Pfad auf einer Website klickbar machen und ein großes Bild zeigt Fancybox verwenden, die eine Lighbox Variante Plugin für jQuery ist.

Meine kleinen Bilder befinden sich unter "images/products/small", die Großen unter "images/products/big" und der Bildname ist immer die gleiche

Die Seite mit dem Bild zeigt mit dem folgenden Code:

<img src="images/products/small/hat.jpg" alt="Nice hat"> 

Was ich will, ist einig jQuery-Skript, das diese in macht:

<a href="images/products/big/hat.jpg" class="fancybox"><img src="images/products/small/hat.jpg" alt="Nice hat"></a> 

Vielleicht kann der Teil mit der Einstellungsklasse auf dem Link-Tag übersprungen werden und fancystbox auf dem Element direkt mit $ (elm) .fancycox();

Ich war ein bisschen herum suchen und es sieht aus wie die jQuery-Funktionen „attr“ und „wrap“ nützlich sein könnten, aber mit meiner derzeit jQuery Fähigkeiten beschränkt ich die Punkte nicht wirklich anschließen kann.

Answer 1

Sie wollen alle Bilder finden, und dann, wie Sie vermutet, können Sie wrap verwenden, wenn Sie wirklich die Struktur soll geändert werden:

$('some_parent_selector img[src*=/small]').wrap(function() { 
    return "<a href='" + this.src.replace("/small", "/large") + "' class='fancybox'/>"; 
}); 

Live example (wenn Sie auf die Schaltfläche klicken, um die Elemente wird umhüllt, das ist vielleicht nicht sofort offensichtlich, aber wenn Sie Firebug oder Dev Tools benutzen oder einfach nur auf sie klicken ...).

Sie waren auf dem richtigen Weg mit attr, btw, aber es kommt vor, dass das src Attribut einer von denen ist, die als eine Eigenschaft auf dem HTMLImageElement DOM-Objekt reflektiert sind, so brauchen Sie nicht attr zu verwenden.