<li class="item last">
<div class="prod_img_block">
<a href="http://www.equalli.com/best-sellers/amsterdam-ring-lgbt-sterling-silver-rainbow-sapphire.html" title="AMSTERDAM RING IN STERLING SILVER by EQUALLI.COM by EQUALLI.COM" class="product-image">
<img src="http://www.equalli.com/media/catalog/product/cache/1/thumbnail/400x400/9df78eab33525d08d6e5fb8d27136e95/2/0/2015_05_15_192g-s-r1482-925_2_1.jpg" alt="test" class="img_left" style="opacity: 0;">
<img src="http://www.equalli.com/media/catalog/product/cache/1/small_image/400x/9df78eab33525d08d6e5fb8d27136e95/2/0/2015_05_15_194g-s-r1482-925_1_3.jpg" alt="AMSTERDAM RING IN STERLING SILVER by EQUALLI.COM by EQUALLI.COM" class="img_default" style="opacity: 1;">
<img src="http://www.equalli.com/media/catalog/product/cache/1/thumbnail/400x400/9df78eab33525d08d6e5fb8d27136e95/2/0/2015_05_15_193g-s-r1482-925_2_1.jpg" alt="test" class="img_right" style="opacity: 0;">
</a>
</div>
<div class="product-info" style="min-height: 105px;">
<a href="http://www.equalli.com/best-sellers/amsterdam-ring-lgbt-sterling-silver-rainbow-sapphire.html" title="AMSTERDAM RING IN STERLING SILVER">
<h2 class="product-name" style="font-size:14px;">
AMSTERDAM RING IN STERLING SILVER </h2>
<div class="price-box">
<span class="regular-price" id="product-price-993">
<span class="price">$220.00</span> </span>
</div>
<div class="price-box">
<span class="regular-price" id="product-price-1220">
<span class="price"></span> </span>
</div>
</a>
<div class="actions">
<!--a title="" class="button" href=""></a-->
</div>
</div>
</li>
ภาพสามภาพซ้อนทับกัน โดยให้ภาพกลางเป็น defalt กำหนดค่าเป็น opacity : 1 ส่วนภาพอื่น เป็น 0
จากนั้นใช้ จาวาสคริป กำหนดว่า จะให้แอด style opacity 1 เมื่อ mouse over
woocommerse คงต้องเขียนเพิ่มมั้งครับ
เว็บตัวอย่างเป็น magento ครับ
ตามนี้ครับจะมีรูป 3 รูป แล้วก็ใช้ jQuery ด้านล่างนี้ครับ
<script>
jQuery(document).ready(function(){
jQuery('.prod_img_block a').mousemove(function(e){
var left_part = jQuery(this).offset().left;
var right_part = jQuery(this).offset().right;
var x = e.pageX - left_part;
var y = e.pageY - jQuery(this).offset().right;
//jQuery('.prod_img_block a').html("X: " x " Y: " y);
var product_width = jQuery(this).width();
var product_width_half = product_width/2;
if (x < product_width_half) {
jQuery(this).find(".img_left").css("opacity", "1");
jQuery(this).find(".img_default").css("opacity", "0");
jQuery(this).find(".img_right").css("opacity", "0");
}
if (x > product_width_half) {
jQuery(this).find(".img_left").css("opacity", "0");
jQuery(this).find(".img_default").css("opacity", "0");
jQuery(this).find(".img_right").css("opacity", "1");
}
});
jQuery('.prod_img_block a').mouseout(function(){
jQuery(this).find(".img_left").css("opacity", "0");
jQuery(this).find(".img_default").css("opacity", "1");
jQuery(this).find(".img_right").css("opacity", "0");
});
jQuery('a.linker').click(function(){
var read_more_height = jQuery( jQuery(this).attr('href') ).offset().top - 150;
jQuery('html, body').animate({
scrollTop: read_more_height
}, 500);
return false;
});
});
</script>
พัฒนาเว็บไซต์
