...

View Full Version : jQuery .append to A HREF



koolsamule
06-16-2010, 08:10 PM
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>
2. Add <a id="img_zoom"> to:

<p><a id="img_zoom"><img id="largeImg" src="images/img1-lg.jpg" alt="Large image" /></a></p>
3. 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!

Dean440
06-16-2010, 09:22 PM
Just by taking a quick glance at your code, I notice you make a reference to $(this) without using each();

This code will cycle through each 'a' in the thumbs div and await a click, then take an action on the one you clicked.



$(document.ready(function(){
$(".thumbs a").each(function(){
$(this).click(function(){
$(this).attr('href','http://google.com');
});
});
});

koolsamule
06-16-2010, 09:38 PM
Hi, thanks for the advice, though I'm trying to get the value of the 'zoom' attribute into the <a id="img_zoom"> link . . . I've amended the jQuery code, but not sure how to apply your tips. . . .

$(document).ready(function(){

$("img_zoom")

$(".thumbs a").each(function(){

$(".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;
});

});

});

koolsamule
06-17-2010, 03:45 PM
Hi, is there someone that can help with this?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum