ADD PLUGIN SHOPIFY

 

​------------------------------------------------------------------------------------------------------------

ADD PLUGIN SHOPIFY

READ MORE:

REL ZOOM WINDOW IMAGE

class = 'cloud-zoom' FOR IMAGE ZOOM
class='cloud-zoom-gallery' FOR CHANGE IMAGE
https://shopifyjs.blogspot.com/2021/03/shopify-cloud-zoom.html
CLOUD ZOOM AND CLOUD ZOOM GALLERY FOUND IN CLOUDZOOM JS FILE
ZOOM WINDOW SIZE ICRES

LIQUID SYNTAX HIGHLIGHT

http://rouge.jneen.net/v3.26.0/liquid/draft

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

<!-- https://codepen.io/daveontrak/full/gDuFe --> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/JavaScript" src="https://www.professorcloud.com/js/cloud-zoom.1.0.2.js"></script>

​

<style>
h2 {
text-align: center;
}
/* This is the moving lens square underneath the mouse pointer. */
.cloud-zoom-lens {
border: 4px solid #888;
margin:-4px;    /* Set this to minus the border thickness. */
background-color:#fff;  
cursor:move;        
}

/* This is for the title text. */
.cloud-zoom-title {
font-family:Arial, Helvetica, sans-serif;
position:absolute !important;
background-color:#000;
color:#fff;
padding:3px;
width:100%;
text-align:center;  
font-weight:bold;
font-size:10px;
top:0px;
}
/* This is the zoom window. */
.cloud-zoom-big {
border:4px solid #ccc;
overflow:hidden;
height:500px;
width:500px;
}
/* This is the loading message. */
.cloud-zoom-loading {
color:white;    
background:#222;
padding:3px;
border:1px solid #000;
}
</style>

{% for image in product.images %}

{% if forloop.first %}  <!-- IF FOR LOOP LINE STOP IMAGE REPEAT -->

​

<!-- <a href='https://dummyimage.com/768x1024/E1F0/000.jpg' class = 'cloud-zoom' id='zoom1'

rel="adjustX: 10, adjustY:-4, softFocus:true">

<img src="https://dummyimage.com/240x320/E1F0/000.jpg" alt='' align="left" title="Optional title display" />

</a>  --> 

​

<a href='{{image |img_url: '768x1024.jpg' }}' class = 'cloud-zoom' id='zoom1'

rel="adjustX: 10, adjustY:-4, softFocus:true">

<img src="{{image | img_url:'240x320.jpg' }}" alt='' align="left" title="Optional title display" />

</a> 

​

{% endif %}

​

<!-- <a href='https://dummyimage.com/768x1024/E1F0/000.jpg' class='cloud-zoom-gallery' title='Thumbnail 1'
rel="useZoom: 'zoom1', smallImage: 'https://dummyimage.com/240x320/E1F0/000.jpg' ">
<img src="https://dummyimage.com/48x64/E1F0/000.jpg" alt = "Thumbnail 1" /></a> -->
​

<a href='{{image |img_url: '768x1024.jpg' }}' class='cloud-zoom-gallery' title='Thumbnail 1'

rel="useZoom: 'zoom1', smallImage: '{{image | img_url:'240x320.jpg' }}' ">

<img src="{{image | img_url:'48x64.jpg' }}" alt = "Thumbnail 1" /></a>

{% endfor %}

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

​----------------------------------------------------------------------------------

OR USE THIS CODE

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

{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
<a href="{{featured_image | product_img_url: 'original' }}"  class="cloud-zoom" id="zoom1" rel="adjustX: 25, adjustY: 0">
<img src="{{featured_image| product_img_url: 'large' }}" alt="{{ product.title | escape }}" />
</a>

{% for image in product.images %}
<a href="{{image | product_img_url: 'original' }}" class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: '{{ image | product_img_url: 'large' }}'">
<img src="{{image| product_img_url: 'small' }}" alt="{{ product.title | escape }}" />
</a>
{% endfor %}
​----------------------------------------------------------------------------------
OR USE THIS CODE
----------------------------------------------------------------------------------
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
<a href="{{featured_image | img_url: '768x1024'}}" class='cloud-zoom' id='zoom1'
rel="adjustX: 10, adjustY:-4, softFocus:true">
<img src={{featured_image | img_url: '440x320'}} alt='{{ featured_image.alt | escape }}' align="left" title="Optional title display" />
</a>
​    
{% for image in product.images %}
<a href="{{image.src | img_url: '768x1024'}}" class='cloud-zoom-gallery' title='Thumbnail 1'
rel="useZoom: 'zoom1', smallImage: '{{ image.src | img_url: '540x320' }}' ">
<img src={{image.src | img_url: '110x110'}} alt = "Thumbnail 1" /></a>
{% endfor %}
----------------------------------------------------------------------------------