I'm trying to change the #lienImg
href
when the .product_thumbnails
li a
is clicked but it doesn't seem to work. Strangely, the .primary_image is updated...
<script type="text/javascript" charset="utf-8"> $(document).ready(function() { $(".product_thumbnails li a").click(function(e) { var imglink = $(this).attr("href"); return e.preventDefault(); $("#lienImg").prop("href", imglink); $(".primary_image").attr("src", imglink); $(".product_thumbnails li").removeClass("active"); $(this).parent().addClass("active"); !1 }) }); </script>
<div class="product_images"> <a href="https://images.bigcartel.com/product_images/187353065/produit_08-294HR.jpg?auto=format&fit=max&w=1200" class="MagicZoom" rel="zoom-position: inner" id="lienImg" title="" style="position: relative; display: inline-block; text-decoration: none; outline: 0px; width: 576px;"><img src="https://images.bigcartel.com/product_images/187353089/produit_08-304HR.jpg?auto=format&fit=max&h=1000&w=1000" alt="Image of Bol Or" class="primary_image" style="opacity: 1;"><div class="MagicZoomBigImageCont MagicBoxShadow" style="overflow: hidden; z-index: 100; top: -100000px; position: absolute; width: 576px; height: 384px; left: 0px; opacity: 0;"><div class="MagicZoomHeader" style="position: relative; z-index: 10; left: 0px; top: 0px; padding: 3px; display: none; visibility: hidden;"></div><div style="overflow: hidden;"><img src="https://images.bigcartel.com/product_images/187353065/produit_08-294HR.jpg?auto=format&fit=max&w=1200" style="padding: 0px; margin: 0px; border: 0px; width: auto; height: auto; position: relative; left: -350px; top: -413px;"></div><div style="color: rgb(255, 0, 0); font-size: 10px; font-weight: bold; font-family: Tahoma; position: absolute; width: 100%; display: none; left: 0px; top: 364px;">Please upgrade to full version of Magic Zoom™</div></div><div class="MagicZoomPup" style="z-index: 10; position: absolute; overflow: hidden; display: none; visibility: hidden; width: 276px; height: 184px; opacity: 0.5; left: 193px; top: 200px;"></div><div class="MagicZoomHint" style="display: block; overflow: hidden; position: absolute; visibility: visible; z-index: 1; left: 2px; right: auto; top: 2px; bottom: auto; opacity: 0.75; max-width: 572px;">Zoom</div></a> <ul class="product_thumbnails"> <li class=""><a href="https://images.bigcartel.com/product_images/187353065/produit_08-294HR.jpg?auto=format&fit=max&h=1000&w=1000"><img src="https://images.bigcartel.com/product_images/187353065/produit_08-294HR.jpg?auto=format&fit=max&w=300" alt="Image of Bol Or"></a></li> <li class="active"><a href="https://images.bigcartel.com/product_images/187353089/produit_08-304HR.jpg?auto=format&fit=max&h=1000&w=1000"><img src="https://images.bigcartel.com/product_images/187353089/produit_08-304HR.jpg?auto=format&fit=max&w=300" alt="Image of Bol Or" data-pin-nopin="true"></a></li> <li><a href="https://images.bigcartel.com/product_images/187353110/produit_08-311HR.jpg?auto=format&fit=max&h=1000&w=1000"><img src="https://images.bigcartel.com/product_images/187353110/produit_08-311HR.jpg?auto=format&fit=max&w=300" alt="Image of Bol Or" data-pin-nopin="true"></a></li> </ul> </div>
Why using return in before executing code?Debug in console,You will find the issue . Update code like below,It is working fine.
$(document).ready(function() {
$(".product_thumbnails li a").click(function(e) {
var imglink = $(this).attr("href");
e.preventDefault();
$("#lienImg").prop("href", imglink);
$(".primary_image").attr("src", imglink);
$(".product_thumbnails li").removeClass("active");
$(this).parent().addClass("active"); !1
})
});
As web developer said preventDefault() function not needed to be returned , also you need to point to the img inside your div .
$(document).ready(function() { $(".product_thumbnails li a").click(function(e) { e.preventDefault(); var imglink = $(this).attr("href"); $("#lienImg > img").prop("src", imglink); // Notice you need to point to a image }) });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="product_images"> <a href="https://images.bigcartel.com/product_images/187353065/produit_08-294HR.jpg?auto=format&fit=max&w=1200" class="MagicZoom" rel="zoom-position: inner" id="lienImg" title="" style="position: relative; display: inline-block; text-decoration: none; outline: 0px; width: 576px;"><img src="https://images.bigcartel.com/product_images/187353089/produit_08-304HR.jpg?auto=format&fit=max&h=1000&w=1000" alt="Image of Bol Or" class="primary_image" style="opacity: 1;"><div class="MagicZoomBigImageCont MagicBoxShadow" style="overflow: hidden; z-index: 100; top: -100000px; position: absolute; width: 576px; height: 384px; left: 0px; opacity: 0;"><div class="MagicZoomHeader" style="position: relative; z-index: 10; left: 0px; top: 0px; padding: 3px; display: none; visibility: hidden;"></div><div style="overflow: hidden;"><img src="https://images.bigcartel.com/product_images/187353065/produit_08-294HR.jpg?auto=format&fit=max&w=1200" style="padding: 0px; margin: 0px; border: 0px; width: auto; height: auto; position: relative; left: -350px; top: -413px;"></div><div style="color: rgb(255, 0, 0); font-size: 10px; font-weight: bold; font-family: Tahoma; position: absolute; width: 100%; display: none; left: 0px; top: 364px;">Please upgrade to full version of Magic Zoom™</div></div><div class="MagicZoomPup" style="z-index: 10; position: absolute; overflow: hidden; display: none; visibility: hidden; width: 276px; height: 184px; opacity: 0.5; left: 193px; top: 200px;"></div><div class="MagicZoomHint" style="display: block; overflow: hidden; position: absolute; visibility: visible; z-index: 1; left: 2px; right: auto; top: 2px; bottom: auto; opacity: 0.75; max-width: 572px;">Zoom</div></a> <ul class="product_thumbnails"> <li class=""><a href="https://images.bigcartel.com/product_images/187353065/produit_08-294HR.jpg?auto=format&fit=max&h=1000&w=1000"><img src="https://images.bigcartel.com/product_images/187353065/produit_08-294HR.jpg?auto=format&fit=max&w=300" alt="Image of Bol Or"></a></li> <li class="active"><a href="https://images.bigcartel.com/product_images/187353089/produit_08-304HR.jpg?auto=format&fit=max&h=1000&w=1000"><img src="https://images.bigcartel.com/product_images/187353089/produit_08-304HR.jpg?auto=format&fit=max&w=300" alt="Image of Bol Or" data-pin-nopin="true"></a></li> <li><a href="https://images.bigcartel.com/product_images/187353110/produit_08-311HR.jpg?auto=format&fit=max&h=1000&w=1000"><img src="https://images.bigcartel.com/product_images/187353110/produit_08-311HR.jpg?auto=format&fit=max&w=300" alt="Image of Bol Or" data-pin-nopin="true"></a></li> </ul> </div>
Remove the return e.preventDefault(); since it breaks your code right after initializing the var imglink.
$(".product_thumbnails li a").click(function(e) {
e.preventDefault();
var imglink = $(this).prop("href");
$("#lienImg").prop("href", imglink);
// ... extra code
});
This line in your code :
$("#lienImg").prop("href", imglink);
already changes the href attribute of lienImg to the clicked product_thumbnails link.
On the other hand the .primary_image is updated due to this line:
$(".primary_image").attr("src", imglink);
Removing it will not make the primary_image's image change to the clicked product_thumbnails image.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.