jQuery - Getting href from <a>

JavaScript
1

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


console.log(link[imgCounter]).attr('href');

How do I get the href here.


<!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

Hi,

Try:

console.log(link[imgCounter].href);