SHOPIFY CLOUD ZOOM

- 


-------------------------------------------------------------------------------------------
SHOPIFY CLOUD ZOOM theme.liquid 
READMORE:
ADD CLOUD ZOOM SHOPIFY
https://youtu.be/9f9nvtoqou0
https://shopifyjs.blogspot.com/2021/03/zoom-plugin-click-and-change-image-and.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.shopify.com/s/files/1/1279/4771/t/3/assets/plugins.min.js?v=10319623023739347280" type="text/javascript"></script>
-------------------------------------------------------------------------------------------
<html>
<head>
{{'vendor.js' | asset_url | script_tag }} 
<!-- VENDOR FILE = JQUERY + DEBOUNCE FILES -->
{{'plugins.min.js' | asset_url | script_tag }}
{{content_for_header }}
<body>
{{content_for_layout}}
</body>
</html>
---------------------------------------------------------------------------
SHOPIFY CLOUD ZOOM product-template.liquid
'plugins.min.js' CLOUD ZOOM CLASS FOR IMAGE ELEVATE ZOOM  AND THUMBLINK CLASS FOR CHANGE IIMAGE
---------------------------------------------------------------------------
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
<a href="{{ featured_image | img_url: 'master' }}" class="cloud-zoom" title="{{product.title}}" data-rel="useWrapper: false, showTitle: false, zoomWidth:'auto', zoomHeight:'auto', adjustY:0, adjustX:10">
<img src="{{ featured_image | img_url: 'grande' }}" alt="{{ featured_image.alt | escape }}">
</a>


{% for image in product.images %}
<a href="{{ image.src | img_url: 'master' }}" class="thumb-link" data-rel="{{ image.src | img_url: 'grande' }}">
<img src="{{image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
</a>
{% endfor %}
---------------------------------------------------------------------------------------------
OR USE THIS CODE
<script type="text/JavaScript" src="{{'zoom.js'|asset_url}}"></script>
https://shopifyjs.blogspot.com/2021/03/zoom-plugin-click-and-change-image-and.html
---------------------------------------------------------------------------------------------

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<!-- 
💋CLOUD ZOOM FILE CONTROL ZOOM AND CLICK FUNCTION💋
✌GET ZOOM FILE CODE FROM✌ 
https://shopifyjs.blogspot.com/2021/03/zoom-plugin-click-and-change-image-and.html
OR USE DRONE SHOPIFY PLUGIN FILE LINK
OR USE ZOOM FILE CODE BETWEEN 
{% javascript %} 
//ZOOM FILE CODE
{% endjavascript %}
<script src="https://cdn.shopify.com/s/files/1/1279/4771/t/3/assets/plugins.min.js?v=10319623023739347280" type="text/javascript"></script>
 -->
<script type="text/JavaScript" src="{{'zoom.js'|asset_url}}"></script>
<!-- {{'zoom.js' | asset_url | script_tag }} -->
​
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
<a href="{{ featured_image | img_url: 'master' }}" class="cloud-zoom" title="{{product.title}}" data-rel="useWrapper: false, showTitle: false, zoomWidth:'auto', zoomHeight:'auto', adjustY:0, adjustX:10">
<img src="{{ featured_image | img_url: 'grande' }}" alt="{{ featured_image.alt | escape }}">
</a>
​
​
{% for image in product.images %}
<a href="{{ image.src | img_url: 'master' }}" class="thumb-link" data-rel="{{ image.src | img_url: 'grande' }}">
<img src="{{image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
</a>
{% endfor %}

---------------------------------------------------------------------------------------------
OR USE THIS CODE
https://community.shopify.com/c/Shopify-Design/Adding-Cloud-Zoom-with-jQuery-to-Supply-theme/td-p/199319
---------------------------------------------------------------------------------------------
<!-- 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;
}
/* This is the loading message. */
.cloud-zoom-loading {
color:white;    
background:#222;
padding:3px;
border:1px solid #000;
}
</style>
<ul class="images">
{% for image in product.images %}
{% if forloop.first %}  <!-- IF FOR LOOP LINE STOP IMAGE REPEAT -->
<a href="{{image | product_img_url: 'original' }}"  class="cloud-zoom" id="zoom1" rel="adjustX: 25, adjustY: 0">
<img src="{{image | product_img_url: 'large' }}" alt="{{ product.title | escape }}" />
</a>
{% endif %}
<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 %}
</ul>
​----------------------------------------------------------------------------------
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 %}
​----------------------------------------------------------------------------------
CLOUD ZOOM CODE
----------------------------------------------------------------------------------
<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>


<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='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='https://dummyimage.com/768X1024/F00/000.jpg' class='cloud-zoom-gallery' title='Thumbnail 2'
rel="useZoom: 'zoom1', smallImage: 'https://dummyimage.com/240X320/F00/000.jpg' ">
<img src="https://dummyimage.com/48x64/F00/000.jpg" alt = "Thumbnail 2" /></a>


<a href='https://dummyimage.com/768x1024/0dfa/000.jpg' class='cloud-zoom-gallery' title='Thumbnail 3'
rel="useZoom: 'zoom1', smallImage: 'https://dummyimage.com/240x320/0dfa/000.jpg' ">
<img src="https://dummyimage.com/48x64/0dfa/000.jpg" alt = "Thumbnail 3" /></a>
----------------------------------------------------------------------------------
CLOUD ZOOM CODE CHANGE FOR SHOPIFY
----------------------------------------------------------------------------------
<!-- 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>
{{ 'cloud-zoom.1.0.2.js' | asset_url | script_tag }}
​
​
<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:'468x624.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:'468x624' }}' ">
<img src="{{image | img_url:'48x64.jpg' }}" alt = "Thumbnail 1" /></a>
​
{% endfor %}
----------------------------------------------------------------------------------














Comments

  1. RGInfotechSeptember 20, 2021 at 12:27 AM

    Accurate and informative. Thanks for sharing this.

    We have a special team for Shopify developers who are well-versed with the interface and all its features. To initiate an online business, you need an expert website developer who can build your eCommerce website/store from scratch.

    Shopify Development Services.

    ReplyDelete

Post a Comment

Popular posts from this blog

ADD AUTOCOMPLETE SEARCH BOX IN SHOPIFY DEBUT THEME 5️⃣

-
Image
  ------------------------------------------------------------------------------------------------------------------------ ADD AUTOCOMPLETE SEARCH BOX IN SHOPIFY READ MORE https://youtu.be/acTT5_lkrCg https://stackoverflow.com/questions/45477730/ajax-jquery-autocomplete-in-search-box-shopify https://stackoverflow.com/questions/39593169/sorting-json-results-by-10-max-results DOWNLOAD: https://fbgadgets.myshopify.com/admin/files/0e841afc73cd3152ebf447feabe7abfa/theme_export__fbgadgets-myshopify-com-shopify-debut-theme__05JUL2022-0654am.zip/download ------------------------------------------------------------------------------------------------------------------------ 1) NEEDS JQUERY FILE WITHOUT ASYNC OR DEFFER IN LINK LIKE <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script> --> OR CHANGE VENDOR JS FILE LINK IN  LAYOUT>THEME LIQUID FILE <script src="{{ 'vendor.js' | asset_url }}"></script> ...
Read more