COLLECTION TEMPLATE PRODUCT CARD GRID ZOOM EFFECT

-------------------------------------------------------------------------------------------------------------------

READ MORE:

https://chrome.google.com/webstore/detail/simple-allow-copy/aefehdhdciieocakfobpaaolhipkcpgc/related

https://www.youtube.com/watch?v=cbp37QeRFHw

https://www.youtube.com/watch?v=xLqWHnS2E5s

http://fbgadgets.blogspot.com/2020/07/shopify-jack-moore-zoom.html

-------------------------------------------------------------------------------------------------------------------

IF YOU DON'T HAVE SLICK SLIDER FILE ADD JAVA SCRIPT LINES IN CODE

<script src="https://www.jacklmoore.com/js/jquery.js"></script>

<script src="https://www.jacklmoore.com/js/jquery.zoom.js"></script>

 ------------------------------------------------------------------------------------------------------------------------

STEP :0

WE  HAVE ALREADY JACK MOORE ZOOM AND JQUERY JS  CODE FILE  IN

VENDOR JS FILE

GO TO LAYOUT FOLDER THEME LIQUID FILE REMOVE DEFER WORD IN LINK

<script src="{{ 'vendor.js' | asset_url }}" ></script>

 ------------------------------------------------------------------------------------------------------------------------

STEP :1

FIND THIS LINE IN SECTION FOLDER FILE collection-template.liquid

{% include 'product-card-grid', max_height: max_height %}

AND ADD CODE

---------------------------------------------------------------------------------------------------------------------------

STEP :2

product-card-grid.liquid CODE

---------------------------------------------------------------------------------------------------------------------------

<style>

/* styles unrelated to zoom */

* { border:0; margin:0; padding:0; }

p { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;}

/* these styles are for the demo, but are not required for the plugin */

.CssClass1{

display:inline-block;

position: relative;

}

/* magnifying glass icon */

.CssClass1:after {

content:'';

display:block; 

width:33px; 

height:33px; 

position:absolute; 

top:0;

right:0;

background:url(https://raw.githubusercontent.com/jackmoore/zoom/master/icon.png);

}

.CssClass1 img {

display: block;

}

.CssClass1 img::selection { background-color: transparent; }
#ex2 img:hover { cursor: url(grab.cur), default; }
#ex2 img:active { cursor: url(grabbed.cur), default; }
</style>
<style>
div:not(.slick-slider)+.HideImageDivAboveOnImageSrcDiv{
display:none;
}
</style>
​
<script>
$(document).ready(function(){
$('#𝕖𝕩𝟙').zoom();
});
</script>

<a href="{{ product.url | within: collection }}"> 
<span  id="𝕖𝕩𝟙" class="CssClass1" style="position: relative; overflow: hidden;"> 
{%- assign featured_image = product.featured_image -%}
<img
data-src="{{featured_image | img_url:'600x600'}}"
src="{{featured_image |img_url:'300x300' }}"
alt="{{ featured_image.alt | escape }}">
<p>Hover</p>
</span>
</a>
<a href="{{ product.url | within: collection }}">
<div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }}</div>
</a>
{% include 'product-price', variant: product %}

------------------------------------------------------------------------------