Question

Heads up: I am quite new to Javascript and have so far only written very basic scripts based on jQuery. I am a quick study though..

What I am after is a way to:

1) identify tags

2) read the img tags

3) wrap the tag with an <a href> tag with a dynamic link based on the src of the img.

Example:

<img src='../../img_T/Culture/C_01/c_01_abb_005.jpg' width='310' height='180' alt='image1'> 

should become

<a href='../../img_L/Culture/C_01/c_01_abb_005.jpg'><img src='../../img_T/Culture/C_01/c_01_abb_005.jpg' width='310' height='180' alt='C 01 Abb 005'></a> 

I am thinking that reading the src of each image and writing it to a variable, then reading that variable and replacing the /img_T/ with /img_L/ and then writing that to a new variable which can then be simply added to each href.

This is how far I have gotten, but this does not work at all:

/* in the comments 'xxx' represents a different unique image string */ /* This should get the <img src='../img_T/xxx' /> string as text and store it. */ var $imgSrc        =    $('.displaywrapper img').attr('src');  /* This part should use the above sourced <img src='../img_T/xxx' string and replace ../img_T/ of the src with ../img_L/ and store it in var = imgLink. */ var imgLink        =    $imgSrc.text().replace('img_T','img_L');  /* This part should then wrap the <img src='../img_T/xxx' /> so it becomes <a href='..img_L/xxx'><img src='../img_T/xxx' /></a> */ $('.displaywrapper img').each(function(){.wrap('<a href='imgLink'></a>')}); 

Thanks for reading. Jannis

Answer 1

I think this should do the trick:

$(document).ready(function() {     $('.displayWrapper img').each(function() {         var src = $(this).attr('src').replace('img_T','img_L');         var a = $('<a/>').attr('href', src);         $(this).wrap(a);     }); }); 

Line 1: Wait for the document to be ready before doing anything..
Line 2: Loop through each image using jQuery’s each function.
Line 3: Get the current image’s src with attr and replace img_T with img_L
Line 4: Dynamically create a new <a> tag and set it’s href attribute to the src in Line 3
Line 5: wrap the <a> tag around the <img> tag.