SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery - Getting href from <a>

    Hi all

    I have a jsfiddel here - http://jsfiddle.net/Q73Nd/3/

    and demo here - http://www.ttmt.org.uk/forum/thumb/

    I want to sequentially load the thumbnails and then load a bigger image of the first thumbnail above.

    My problem is I can't get the href for the large image from the <a>

    I have vars to the <a> and a imgCounter. I'm trying to use these to get the href


    Code:
    console.log(link[imgCounter]).attr('href');
    How do I get the href here.


    Code:
    <!DOCTYPE html>
    <html>
      <meta charset="UTF-8">
      <title>Title of the document</title>
      <meta name="description" content="">
      <meta name="keywords" content="">
      <meta name="robots" content="">
      
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
      
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        
      
      <style type="text/css">
        *{
          margin:0;
          padding:0;
        }
        section{
          max-width:1000px;
          margin:0 auto;
        }
        #bigImg{
          height:600px;
        }
        #thumbs ul{
          float:left;
        }
        #thumbs ul li{
          display:inline;
        }
        #thumbs ul li a{
          display:inline-block;
          float:left;
          margin:0 5px 0 0;
        }
        #thumbs ul li a img{
          display:none;
        }
      </style>
      
      </head>
      
    <body>
      
      
      <section>
        
        
        <div id="bigImg">
          <img src="" alt="" />
        </div>
          
        <div id="thumbs">
          <ul>
            <li><a href="images/01.jpg"><img src="images/01_th.jpg" /></a></li>
            <li><a href="images/02.jpg"><img src="images/02_th.jpg" /></a></li>
            <li><a href="images/03.jpg"><img src="images/03_th.jpg" /></a></li>
            <li><a href="images/04.jpg"><img src="images/04_th.jpg" /></a></li>
            <li><a href="images/09.jpg"><img src="images/09_th.jpg" /></a></li>
            <li><a href="images/10.jpg"><img src="images/10_th.jpg" /></a></li>
            <li><a href="images/11.jpg"><img src="images/11_th.jpg" /></a></li>
            <li><a href="images/12.jpg"><img src="images/12_th.jpg" /></a></li>
          </ul>
        </div>
        
          
      </section>  
      
      
      <script src="js/imagesLoaded.js"></script>
      
      <script>
    
        var i=0,
          imgCounter = 0,
          bigImg = $('#bigImg img'),
          link = $('#thumbs li a'),
      	  lis = $('#thumbs img');
          
        $(function() {
          
          function displayThumbs(){
        		if(i<lis.length){
            		lis.eq(i).fadeIn(150, checkLoad);
        		}else{
        		  startShow();
        		}
          } 
    
          function checkLoad(){
        		lis.imagesLoaded(function(){
              i++;
              displayThumbs();
            });
          }
    
        	displayThumbs();
    
        });
        
        function startShow(){
          console.log(link[imgCounter]).attr('href');
        }
        
      </script>
      
      
    </body>
    
    </html>

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Try:

    Code JavaScript:
    console.log(link[imgCounter].href);


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
  •