JS: Link specified in data-href not working in carousel

I have a carousel: JS Fiddle. I am trying to figure out how to link each image that appears as the main image to its own page, such that:

  • when I click on the image of the wagon - it goes to wagon.com,
  • when I click on the image of the heirloom photo - it goes to heirloom.com,
  • when I click on the image of the woolly - it goes to woolly.com, etc.

          <li>
                        <a href="https://upload.wikimedia.org/wikipedia/commons/e/e9/Baker's-van-r.jpg"></a>
                        <a data-href="www.wagon.com"></a>
                        <div class="block">
                           <h2>Wagon wins again</h2>
                        </div>
        </li>
    
    
        <li>
                        <a href="https://s-media-cache-ak0.pinimg.com/736x/00/60/ff/0060ff20d110050c0e350c55f7c7f3be.jpg"></a>
                        <a data-href="www.heirloom.com"></a>
                        <div class="block">
                            <h2>Heirloom Scareloom</h2>                                                                 
                        </div>
        </li>
    
        <li>
                        <a href="https://upload.wikimedia.org/wikipedia/commons/7/79/Mammuthus_trogontherii122DB.jpg"></a>
                       <a data-href="www.woollies.com"></a>
                        <div class="block">
                            <h2>The Original Wollies</h2><br>                                                               
                       </div>
        </li>   
    

In the JQuery, I have made use of `data-href`` to assign the link for each each image.

var imgAlt = $(this).find('img').attr("alt"); //  Get Alt Tag of Image
        var imgTitle = $(this).find('a').attr("href"); // Get Main Image URL
    var imgLink = $(this).find('a').attr("data-href"); // Get Main Image URL
        var imgDesc = $(this).find('.block').html();    //  Get HTML of block
        var imgDescHeight = $(".main_image").find('.block').height();   // Calculate height of block

However the links do not go to the specified page. Would appreciate any direction on how to deal with this. Where am I going wrong?

Answers 1

Related Articles