SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery .append to A HREF

    Hi Chaps,

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

    HTML Code:
    <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:
    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:
    HTML Code:
    <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:
    HTML Code:
    <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:
    Code:
    $(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. #2
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,617
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Code:
    $('.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:

    Code:
    $('.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?
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  3. #3
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    $(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;
    	});
    	
    });
    The code in red, I added myself, but doesn't work. How would the code look if your code was in inserted? (+ sorry)

  4. #4
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, is there someone who can me with this?

  5. #5
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,617
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    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)

    http://planetozh.com/projects/lightbox-clones/
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •