Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2009
    Posts
    45
    Thanks
    4
    Thanked 0 Times in 0 Posts

    jQuery .append to A HREF

    Hi Chaps,

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

    PHP Code:
    <p><img id="largeImg" src="images/img1-lg.jpg" alt="Large image" /></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:
    PHP Code:
    <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:
    PHP 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
    Regular Coder
    Join Date
    Dec 2009
    Posts
    115
    Thanks
    2
    Thanked 10 Times in 10 Posts
    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.

    Code:
    $(document.ready(function(){
      $(".thumbs a").each(function(){
         $(this).click(function(){
             $(this).attr('href','http://google.com');
         });
      });
    });
    Last edited by Dean440; 06-16-2010 at 10:25 PM.

  • #3
    New Coder
    Join Date
    Sep 2009
    Posts
    45
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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. . . .
    Code:
    $(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;
    		});
    
    	});
    	
    });

  • #4
    New Coder
    Join Date
    Sep 2009
    Posts
    45
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hi, is there someone that can help with this?


  •  

    Posting Permissions

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