title: Add Woocommerce Zoom to custom gallery
body: <p>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. </p>
  
  <p>I knew newer version of Woocommerce already included this features. But how do I used it in my custom template?</p>
  
  <p>The image galler html is look like this:</p>
  
  <pre><code>&lt;div class="wpgs-for"&gt;
  &lt;a class="venobox" data-gall="wpgs-lightbox" title="title" href="www.dadada.com" &gt;&lt;img src="url"/&gt;&lt;/a&gt;
  &lt;a class="venobox" data-gall="wpgs-lightbox" title="title" href="www.dadada.com" &gt;&lt;img src="url"/&gt;&lt;/a&gt;
  &lt;a class="venobox" data-gall="wpgs-lightbox" title="title" href="www.dadada.com" &gt;&lt;img src="url"/&gt;&lt;/a&gt;
  .....
  &lt;/div&gt;
  </code></pre>
  
  <p>Is this any custom class/attributes to initialize the zoom js?</p>