views:

2715

answers:

2

Hello.

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

+16  A: 

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.

Paolo Bergantino
You should check if there already is a A around the IMG.
Gumbo
I don't see why that's necessary if he's in control of his HTML and it will be run once when the document loads.
Paolo Bergantino
thanks! But there is still something not working, at least not in my website.If you can, please have a look at it in action, i promise this is not a blatant plug of my website: http://bgarchitect.co.nz/culture/new-flora/I have added the code above but it simply does not take effect
Jannis
my apologies. the script DOES work. the error is somewhere else as the jQuery fancyzoom plugin does not pick up the link.Thank you very much!
Jannis
You are welcome. Nice site. :)
Paolo Bergantino
update: I have found the other bug that was not in this script and everything works now.thanks again.
Jannis
loving your work :)
GordonB
+3  A: 

If you just need the images clickable, do this:

$(".displayWrapper img").click(function(){
  document.location.href = this.src.replace("img_T", "img_L");
});
svinto