Add Woocommerce Zoom to custom gallery

Question

I created a custom product gallery. Everything is working fine, but the problem is I can't use the zoom effects anymore in my own custom product image templates. The zooming I meant here, is when mouse over the image, it will magnify the area around the mouse cursor, not pop up zoom.

I knew newer version of Woocommerce already included this features. But how do I used it in my custom template?

The image galler html is look like this:

<div class="wpgs-for">
<a class="venobox" data-gall="wpgs-lightbox" title="title" href="www.dadada.com" ><img src="url"/></a>
<a class="venobox" data-gall="wpgs-lightbox" title="title" href="www.dadada.com" ><img src="url"/></a>
<a class="venobox" data-gall="wpgs-lightbox" title="title" href="www.dadada.com" ><img src="url"/></a>
.....
</div>

Is this any custom class/attributes to initialize the zoom js?

Answer 1

jQuery exzoom: Product Carousel Example

You can simply use a library called exzoom very tiny and light weight for carousal and zoom feature for product gallery

Here is a simple example of usages of that library

$(function(){
  $("#exzoom").exzoom({
    // thumbnail nav options
    "navWidth": 60,
    "navHeight": 60,
    "navItemNum": 5,
    "navItemMargin": 7,
    "navBorder": 1,

    // autoplay
    "autoPlay": true,

    // autoplay interval in milliseconds
    "autoPlayTimeout": 2000

  });

});

I have made demo here you can see

$(document).ready(function() {
$('.container').imagesLoaded( function() {
  $("#exzoom").exzoom({
        autoPlay: false,
    });
  $("#exzoom").removeClass('hidden')
});

});

.container { margin: 10px auto; max-width: 650px; }
.hidden { display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
    <script src="https://www.jqueryscript.net/demo/Product-Carousel-Magnifying-Effect-exzoom/jquery.exzoom.js"></script>
    <link href="https://www.jqueryscript.net/demo/Product-Carousel-Magnifying-Effect-exzoom/jquery.exzoom.css" rel="stylesheet" type="text/css"/>

<style>
    body { min-height: 100vh;background-image: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%); }
    #exzoom {
        width: 400px;
    }
    .container { margin: 10px auto; max-width: 650px; }
    .hidden { display: none; }
</style>

<div class="container">
<div class="exzoom hidden" id="exzoom">
    <div class="exzoom_img_box">
        <ul class='exzoom_img_ul'>
            <li><img src="https://picsum.photos/270/270/?random"/></li>
            <li><img src="https://picsum.photos/320/320/?random"/></li>
            <li><img src="https://picsum.photos/600/600/?random"/></li>
            <li><img src="https://picsum.photos/500/500/?random"/></li>
            <li><img src="https://picsum.photos/700/700/?random"/></li>
            <li><img src="https://picsum.photos/310/310/?random"/></li>
            <li><img src="https://picsum.photos/410/410/?random"/></li>
            <li><img src="https://picsum.photos/400/400/?random"/></li>
        </ul>
    </div>
    <div class="exzoom_nav"></div>
    <p class="exzoom_btn">
        <a href="javascript:void(0);" class="exzoom_prev_btn"> < </a>
        <a href="javascript:void(0);" class="exzoom_next_btn"> > </a>
    </p>
</div>
</div>
</div>