jQuery .append to A HREF

JavaScript
1

Hi Chaps,

I have thumbnail gallery which, when clicked opens up a large version in a div.

<p><img id="largeImg" src="images/img1-lg.jpg" alt="Large image" /></p>
<p class="thumbs">
	<a href="images/img2-lg.jpg" title="Image 2"><img src="images/img2-thumb.jpg" /></a>
	<a href="images/img3-lg.jpg" title="Image 3"><img src="images/img3-thumb.jpg" /></a>
</p>

The jQuery Code:

$(document).ready(function(){
	
	$(".thumbs a").click(function(){
		var largePath = $(this).attr("href");
		var largeAlt = $(this).attr("title");
		$("#largeImg").attr({ src: largePath, alt: largeAlt });
	});
	
});

With a bit of CSS, this is working fine.

What I’m trying to do is to:

  1. Add attribute to:
<p class="thumbs">
	<a href="images/img2-lg.jpg" zoom="images/img2-zoom.jpg" title="Image 2"><img src="images/img2-thumb.jpg" /></a>
	<a href="images/img3-lg.jpg" zoom="images/img3-zoom.jpg" title="Image 3"><img src="images/img3-thumb.jpg" /></a>
</p>
  1. Add <a id=“img_zoom”> to:
<p><a id="img_zoom"><img id="largeImg" src="images/img1-lg.jpg" alt="Large image" /></a></p>
  1. Add to the jQuery code, to append the “<a>” link, something like:
$(document).ready(function(){
	
	$("img_zoom").append('" href="')

	$(".thumbs a").click(function(){
	
		var largePath = $(this).attr("href");
		var largeAlt = $(this).attr("title");
		var zoomPath = $(this).attr("zoom");
				
		$("#largeImg").attr({ src: largePath, alt: largeAlt });
		
		$("img_zoom").html(zoomPath+" " "); return false;
	});
	
});

So when the thumbnail image is clicked, the resulting jQuery output would be something like this:

<a id=“img_zoom” href=“images/img3-zoom.jpg”>

Is this do-able? I’ve played around with it for ages and can’t get it to work.
Any hlep would be awesome!

2

Hi Force Flow, thanks for the advice, though I’m not sure whether the original bits that I added, sorry if this seems like a dumb question, just a newbie a bit out of his depth:

$(document).ready(function(){
	
	[COLOR="DarkRed"]$("img_zoom").append('" href="')[/COLOR]

	$(".thumbs a").click(function(){
	
		var largePath = $(this).attr("href");
		var largeAlt = $(this).attr("title");
		[COLOR="DarkRed"]var zoomPath = $(this).attr("zoom");[/COLOR]
				
		$("#largeImg").attr({ src: largePath, alt: largeAlt });
		
		[COLOR="DarkRed"]$("img_zoom").html(zoomPath+" " "); return false;[/COLOR]
	});
	
});

The code in red, I added myself, but doesn’t work. How would the code look if your code was in inserted? (+ sorry)

3

I don’t understand what you’re trying to do with the code you added…

What are you trying to do with the append()?

There is no “zoom” attribute in HTML, so you can’t use that.

html() will set the html of the selection to the value to specify.

On another note, I realized I missed a closing quote in the examples I posted above.

$('.thumbs a) should be $(‘.thumbs a’)

From what I gather, it looks like you’re trying to come up with a lightbox solution…I might suggest with going with something listed here (either the other/none option or the jQuery option)

4

Hi, is there someone who can me with this?

5 

$('.thumbs a).onclick(function(){
    $(this).attr('id', 'img_zoom');
});

That should do it.

Note that IDs should be entirely unique per HTML page. I might suggest adding it as a class instead:


$('.thumbs a).onclick(function(){
    $(this).addClass('img_zoom');
});

Have you thought about how this attribute will be removed from the link after it’s been added?