TUTORIAL

Here's how to set up this plugin in your Carrd site:
– Download the template
– Copy the code from the Embed element titled "Image Magnifying Glass"
– Add an Embed element in your Carrd site, set it to Inline - remember to uncheck "Defer script tags"
- Add your image. Look for this code:<img
id="mainImage"
src="https://imagemagnifyingglass.carrd.co/assets/images/image02.jpg"
alt="Zoomable Product"
/>
<div class="lens" id="lens">
<img
src="https://imagemagnifyingglass.carrd.co/assets/images/image02.jpg"
alt=""
/>

Add the direct image URL to the src . You can use the external URL of an image hosted elsewhere, or upload it to your Carrd site and right click to save image address.
- Publish!————————————————————————————————How to adjust the image size:
- Look for this code:<style>
.img-container {
position: relative;
width: 500px;
height: 500px;
overflow: hidden;
border: 10px solid #FFF;
border-radius: 5px;
}
- Adjust the width and height to suit your site.————————————————————————————————How to adjust the size of the magnifying glass lens:
- Look for this code:.lens {
position: absolute;
border: 2px solid rgba(0, 0, 0, 0.4);
border-radius: 50%;
width: 130px; /* Larger lens */
height: 130px;
- Adjust the width and height increase/decrease the size of the magnifying glass lens.————————————————————————————————How to adjust the size of the magnifying glass lens:
- Look for this code:.lens {
position: absolute;
border: 2px solid rgba(0, 0, 0, 0.4);
border-radius: 50%;
width: 130px; /* Larger lens */
height: 130px;
- Adjust the width and height increase/decrease the size of the magnifying glass lens.————————————————————————————————How to adjust the magnification factor of the magnifying glass lens:
- Look for this code inside the <script> tags:const zoom = 1.5; // magnification factor
- Adjust the value 1.5. Increase it to increase magnification factor.

• Back