Bildpfad in HTML-Bildreferenz erkennen und Verknüpfung erstellen

Question

Wie erkenne ich den Pfad einer HTML-Bildreferenz und füge eine bestimmte Hyperlinkreferenz hinzu.

Zum Beispiel:

<div class="description"> 
    <img src="https://www.example.com/image/hello.jpg"> 
</div> 

Nach einem Skript erkennt die URL Bild, um es sollte einen Code wie folgt aufbauen:

<div class="description"> 
    <a class="fancybox" href="https://www.example.com/image/hello.jpg"> 
     <img src="https://www.example.com/image/hello.jpg"> 
    </a> 
</div> 

Ich glaube, ich ein Skript benötigen, aber ich habe keine Erfahrung in Javascript

Answer 1

Ich würde empfehlen, dass Sie eine Klasse zu jedem img hinzufügen, es sei denn Sie planen, dies für jedes IMG-Tag zu tun.

$("img").wrap(function(){ 
    return $("<a>").attr("href", $(this).attr("src")).addClass("fancybox"); 
}); 

Update: Für alle Bilder in der Beschreibung Klasse, können Sie

$(".description img").wrap(function(){ 
    return $("<a>").attr("href", $(this).attr("src")).addClass("fancybox"); 
}); 

verwenden Dieser findet alle in der Beschreibung Klasse img.

Ich würde Ihnen immer noch raten, eine Klasse für jeden IMG zu verwenden. Dies wird Ihnen helfen, falls Sie sich in Zukunft für ein Bild wie ein Logo in der Beschreibung entscheiden, das diesen Umbruch nicht benötigt. Wenn Sie das tun, müssen Sie den Selektor auf $(".description img.myclass") aktualisieren.