[meemorize]

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 <img src="xxx"> tags
2) read the img tags <src="">
3) wrap the <img> 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>

basically create a link based on the src but swap the directory from img_T to img_L.
the usage is to associate each img with a link pointing to a higher resolution image. I use the 'fancyzoom' jQuery plugin to show the larger variant of each image.
the reason I do not do this manually is that I am dealing with an image gallery of around 350+ images so replacing by hand is really a last resort.

thanks for reading.
looking forward to your ideas.

M.

PS: in case someone wants to look at the site i am talking about to get a feel for the environment, go to www.bgarchitect.co.nz/index.php.
please note that the initial images are a simple overview not associated with the fancyzoom. each subcategory (clicking an image leads to) however is using fancyzoom.

[Catalyst]

With a text editor that supports regular expressions you could do this with a single command and not need the jQuery. But the jQuery for it isn't too bad either.

Assuming you can wrap all the images inside a container and that there's not other images in it you could use $("#container img") to grab all the images. Then use .each() to loop through them, with this.attr("src") to get the image source, do a string replace on it, and then use that along with .wrap() to put the links around the images.

[meemorize]

Catalyst, on Feb 24 2009, 08:14 PM, said:

With a text editor that supports regular expressions you could do this with a single command and not need the jQuery. But the jQuery for it isn't too bad either.

Assuming you can wrap all the images inside a container and that there's not other images in it you could use $("#container img") to grab all the images. Then use .each() to loop through them, with this.attr("src") to get the image source, do a string replace on it, and then use that along with .wrap() to put the links around the images.

Thanks for the reply.

I do have a text editor handy (TextMate—working on a mac here) that I believe does support this kind of thing—though i cannot seem to get it to work for me—however i like the idea of having this jQuery system do it for me so that in future pages I can be as simple as dropping in the images and having the script take care of the rest.

In terms of the actual scripting, it seems you really know what you're talking about. I unfortunately am kind of lost, but let me explain this further:

"...and that there's not other images in it..." — do you mean other images that should not be wrapped? such as an image based navigation, etc? In that case the selector could be $(.displaywrapper img) as all images that need to be wrapped are contained withing a div that has the 'displaywrapper' class applied to it. Within displaywrapper are no other images.

"Then use .each() to loop through them, with this.attr("src") to get the image source, do a string replace on it, and then use that along with .wrap() to put the links around the images." — I think I understand the logic of this however in this part I simply fall short of technical know how, I will do a bit of reading on that in the morning, however I can fathom how to use the .each() and the .wrap() part of it but what I cannot quite grasp is how to actually do a string replace and how the this.attr("src") would play into that.

I don't expect you to explain this all to me as most of it can probably be found within the jQuery documentation and I will do my research on that in the morning but if you could further explain these things to me that would be fantastic. In particular how to write a string replace on the attr("src") would work and how these things would work in tandem. I assume there will be a set of vars that would be written to and read from?

Thanks again for the response.
M.

EDIT:

I couldn't sleep so I did the best I could with the information I could find online. Do you think this would do what I need it to do?

/* 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>")});

This post has been edited by meemorize: 24 February 2009 - 07:01 AM

[meemorize]

I have found the solution through someone at StackOverflow and thought I'd share it with you guys in case someone else has become curious:

$(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.

Thanks to you Catalyst for taking an interest and thanks to Paolo Bergantino at StackOverflow for the solution.

[EncoderDecoder]

this is quite helpful for me too.. thanks..