Wie verbindet man ein Bild doppelt

Question

Ich habe ein Karussell: JS Fiddle. Ich versuche herauszufinden, wie man jedes Bild, das als Hauptbild erscheint, mit seiner eigenen Seite verbindet. Im Moment führt ein Klick auf ein Bild zur Wikipedia-Seite, da dies der Link ist, den ich in der main_image div angegeben habe.

Sollte ich eine weitere href in der <li> angeben? Meine Vermutung ist, dass ich eine weitere Variable in der JS in den Zeilen var imgTitle = $(this).find('a').attr("href") erstellen muss, aber ich bin mir überhaupt nicht sicher, wie genau.

var intervalId; 
 
var slidetime = 2500; 
 
$(document).ready(function() { 
 
    // Comment out this line to disable auto-play 
 
    intervalID = setInterval(cycleImage, slidetime); 
 
    $(".main_image .desc").show(); // Show Banner 
 
    $(".main_image .block").animate({ 
 
    opacity: 0.85 
 
    }, 1); // Set Opacity 
 
    $(".image_thumb ul li:first").addClass('active'); 
 

 

 
    $(".image_thumb ul li").click(function() { 
 
    // Set Variables 
 
    var imgAlt = $(this).find('img').attr("alt"); // Get Alt Tag of Image 
 
    var imgTitle = $(this).find('a').attr("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 \t 
 

 
    if ($(this).is(".active")) { // If it's already active, then... 
 
     return false; // Don't click through 
 
    } else { 
 
     // Animate the Teaser \t \t \t \t 
 
     $(".main_image .block").animate({ 
 
     opacity: 0, 
 
     marginBottom: -imgDescHeight 
 
     }, 250, function() { 
 
     $(".main_image .block").html(imgDesc).animate({ 
 
      opacity: 0.85, 
 
      marginBottom: "0" 
 
     }, 250); 
 
     $(".main_image img").attr({ 
 
      src: imgTitle, 
 
      alt: imgAlt 
 
     }); 
 
     }); 
 
    } 
 

 
    $(".image_thumb ul li").removeClass('active'); // Remove class of 'active' on all lists 
 
    $(this).addClass('active'); // add class of 'active' on this list only 
 
    return false; 
 

 
    }).hover(function() { 
 
    $(this).addClass('hover'); 
 
    }, function() { 
 
    $(this).removeClass('hover'); 
 
    }); 
 

 
    // Function to autoplay cycling of images 
 
    function cycleImage() { 
 
    var onLastLi = $(".image_thumb ul li:last").hasClass("active"); 
 
    var currentImage = $(".image_thumb ul li.active"); 
 

 

 
    if (onLastLi) { 
 
     var nextImage = $(".image_thumb ul li:first"); 
 
    } else { 
 
     var nextImage = $(".image_thumb ul li.active").next(); 
 
    } 
 

 
    $(currentImage).removeClass("active"); 
 
    $(nextImage).addClass("active"); 
 

 
    // Duplicate code for animation 
 
    var imgAlt = $(nextImage).find('img').attr("alt"); 
 
    var imgTitle = $(nextImage).find('a').attr("href"); 
 
    var imgDesc = $(nextImage).find('.block').html(); 
 
    var imgDescHeight = $(".main_image").find('.block').height(); 
 

 
    $(".main_image .block").animate({ 
 
     opacity: 0, 
 
     marginBottom: -imgDescHeight 
 
    }, 250, function() { 
 
     $(".main_image .block").html(imgDesc).animate({ 
 
     opacity: 0.85, 
 
     marginBottom: "0" 
 
     }, 250); 
 
     $(".main_image img").attr({ 
 
     src: imgTitle, 
 
     alt: imgAlt 
 
     }); 
 
    }); 
 
    }; 
 

 
});

.features { 
 
    flex: 1; 
 
    display: flex; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: row; 
 
    -ms-flex-direction: row; 
 
    flex-direction: row; 
 
    /* \t width: 60%; */ 
 
    min-width: 62.4%; 
 
    max-width: 62.4%; 
 
    margin-right: 0; 
 
    padding-right: 0; 
 
    position: relative; 
 
} 
 
.main_image { 
 
    flex: 1 0 auto; 
 
    min-width: 72.3%; 
 
    max-width: 72.3%; 
 
    margin-right: 0; 
 
    height: 400px; 
 
    float: left; 
 
    background: #333; 
 
    position: relative; 
 
    overflow: hidden; 
 
    color: #fff; 
 
    padding-bottom: 10px; 
 
    padding-right: 0; 
 
    /* \t \t \t \t \t \t border-top: 5px solid blue; */ 
 
    /* \t \t \t \t \t \t border-right: 5px solid red; 
 
*/ 
 
} 
 
.main_image img { 
 
    margin-right: 0; 
 
    max-height: 475px; 
 
    padding-right: 0; 
 
    max-width: 610px; 
 
} 
 
.main_image h2 { 
 
    font-size: 2em; 
 
    font-weight: normal; 
 
    margin: 0 0 5px; 
 
    padding: 10px; 
 
    padding-bottom: 0px; 
 
    line-height: 1.2em; 
 
    /* \t font-variant: small-caps; */ 
 
    font-family: Open Sans; 
 
    font-style: italic; 
 
} 
 
.block small { 
 
    padding: 0 0 5px 5px; 
 
    background: url(images/icon_cal.gif) no-repeat 0 center; 
 
    font-size: 1em; 
 
} 
 
.main_image .block small { 
 
    margin-left: 5px; 
 
} 
 
.main_image .desc { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    display: none; 
 
} 
 
.main_image .block { 
 
    width: 100%; 
 
    background: #111; 
 
    border-top: 1px solid #000; 
 
    padding-bottom: 8px; 
 
} 
 
.image_thumb { 
 
    float: left; 
 
    margin-right: 0; 
 
    padding-right: 0; 
 
    margin-left: 0; 
 
    padding-left: 0; 
 
    width: 223px; 
 
    height: 40px; 
 
    background: #f0f0f0; 
 
    /* \t \t \t \t \t \t border-right: 1px solid #fff; */ 
 
    border-top: 1px solid #ccc; 
 
    flex: 1; 
 
} 
 
.image_thumb ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    /* \t \t \t \t \t \t border: 4px solid green; \t 
 
*/ 
 
} 
 
.image_thumb ul li { 
 
    margin: 0; 
 
    padding: 12px 10px; 
 
    background-color: #f0f0f0; 
 
    min-width: 213px; 
 
    height: 56.2px; 
 
    float: left; 
 
    border-bottom: 1px solid #ccc; 
 
    border-top: 1px solid #fff; 
 
    border-right: 1px solid #ccc; 
 
} 
 
.image_thumb ul li.hover { 
 
    background: #ddd; 
 
    cursor: pointer; 
 
} 
 
.image_thumb ul li.active { 
 
    background: #fff; 
 
    cursor: default; 
 
} 
 
.image_thumb ul li h2 { 
 
    font-size: 1.5em; 
 
    margin: 5px 0; 
 
    padding: 0; 
 
    line-height: 1.2em; 
 
    /* \t font-variant: small-caps; */ 
 
    font-family: Open Sans; 
 
    font-style: italic; 
 
} 
 
.image_thumb ul li .block { 
 
    float: left; 
 
    margin-left: 10px; 
 
    padding: 0; 
 
    width: 180px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<section class="features"> 
 

 
    <span class="sticker"> 
 
\t \t \t \t \t <img class="tab1special" src="images/featurestab.png" alt="main"> 
 
\t \t \t \t \t \t \t </span> 
 

 
    <div class="main_image"> 
 
    <a href="https://www.wikipedia.org"> 
 
     <img src="https://upload.wikimedia.org/wikipedia/commons/e/e9/Baker's-van-r.jpg" /> 
 
    </a> 
 
    <div class="desc"> 
 
     <div class="block"> 
 
     </div> 
 
    </div> 
 
    <h2>Wagon wins again</h2> 
 
    </div> 
 

 

 
    <div class="image_thumb"> 
 
    <ul> 
 

 
     <li> 
 
     <a href="https://upload.wikimedia.org/wikipedia/commons/e/e9/Baker's-van-r.jpg"></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> 
 
     <div class="block"> 
 
      <h2>Heirloom Scareloom</h2> 
 

 
     </div> 
 
     </li> 
 
     <li> 
 
     <a href="https://upload.wikimedia.org/wikipedia/commons/7/79/Mammuthus_trogontherii122DB.jpg"></a> 
 
     <div class="block"> 
 
      <h2>The Original Wollies</h2> 
 
      <br> 
 

 
     </div> 
 
     </li> 
 
     <li> 
 
     <a href="images/booksleeve2.jpg"></a> 
 
     <div class="block"> 
 
      <h2>Tales from the West</h2> 
 
      <br> 
 

 
     </div> 
 
     </li> 
 
     <li> 
 
     <a href="images/spiceroute.jpg"></a> 
 
     <div class="block"> 
 
      <h2>A Journey through Time</h2> 
 
      <br> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
</section>

Answer 1

Sie können nicht zwei Hyperlinks auf dem gleichen Element erstellen. Wie würde der Browser wissen, welchem ​​Link er folgen soll? Warum erstellen Sie nicht ein separates Textelement, das die Wikipedia-Seite mit diesem Link belohnt, und verwenden Sie das Bild-Div als Ihren Seitenlink?

Answer 2

Bilder können keine Links sein. Aber Sie können Bilder in Links sehr einfach mit jQuery umwickeln. Ihr aktueller Code hat:

$(".main_image img").attr({ src: imgTitle , alt: imgAlt}); 

, die die Quelle und den alternativen Text des aktuellen Bildes setzt. Wenn Sie das Bild in einem Link wickeln möchten, können Sie tun:

$(".main_image img").attr({ src: imgTitle , alt: imgAlt}).wrap($('<a>',{ 
    href: imgTitle // over whatever URL you like 
    })); 

Bricht das img-Tag in einem Link. Zur Zeit verlinkt es nur auf die Bildquelle, aber Sie können es zu nichts ändern.