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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With