Basic Use of Magnifier.js-master In Web Programming

andysupriady (51)in #utopian-io • 7 years ago (edited)

Hello how are you all ..... !!! in this post I will again discuss about Web programming , this time I will discuss how to make zoom images like using a magnifying glass, the plugin that I use to make this tutorial is Magnifier.js-master, I hope my post this time can be guidelines for those of you who learn web programming especially those related to image zooming.
we'll ... right away we start to this discussion.

1. What is That Magnifier.js-master

"Magnifier.js-master" is a plugin that can be used to enlarge a user's point of view, this plugin allows users to see the details of the image, simply by pointing the mouse pointer in the area you want to zoom in, without having to click on the image.

"Magnifier.js-master" works almost the same as a magnifying glass, so this plugin is perfect for use on the web that mostly contains images, such as web ecommerce, photo gallery and others.
"Magnifier.js-master" is an HTML function <img src = "..."> combined with java script and css, which works to auto-zoom images.

2. How to Download

Step1
Make sure you already have the file "Magnifier.js-master", if you do not already have the file you can download it at link https://github.com/mark-rolich/Magnifier.js
pkaca pembesar1.jpg

Step 2.
In the second stage, we will download the .zip file from "Magnifier.js-master" by clicking the clone or download button, then select download zip, and wait until the download is complete.
pkaca pembesar2.jpg

Step 3.
Create a new folder and extract the .zip file to that folder.

3. How to install

Step1.
Create basic basic structure of html. and place it below


<html>
     <head>
      <title> product-image-zoom </title>
     </head>
    <body>
     ......  
    </body>
</html>

Step2.
Create function for to calling CSS file. and put it under < /title&gt


 <link rel="stylesheet" type="text/css" href="Magnifier.js-master/demo/magnifier.css">

Step3.

Create a HTML function to set the main Image, put this code in <body>


<div class="slider">
    <div style="width: 410px; margin: 0 auto">
        <a class="magnifier-thumb-wrapper demo" href="andy MPAP.jpg" >
            <img id="thumb" src="andy MPAP.jpg" 
            data-large-img-url="andy MPAP.jpg"
            data-large-img-wrapper="preview" style="width: 80%; padding-top 40%;" >
        </a>
    </div>   
</div>

Step4.
Create function for to calling java sript file. and put to before < /body>


<script type="text/javascript" src="Magnifier.js-master/demo/Event.js"></script>
<script type="text/javascript" src="Magnifier.js-master/demo/Magnifier.js"></script>
<script type="text/javascript">
var evt = new Event(),
    m = new Magnifier(evt);
</script> 
<script type="text/javascript">
m.attach({
    thumb: '#thumb',
    large: 'andy MPAP.jpg',
    mode: 'inside',
    zoom: 3,
    zoomable: true
});
</script>

4. Explanation of the code

<link rel="stylesheet" type="text/css" href="Magnifier.js-master/demo/magnifier.css"> = This code aims to add the css function of Magnifier.js-master/.
<a class="magnifier-thumb-wrapper demo" href="andy MPAP.jpg" > = This code serves to direct the link to the image when the image is clicked
img id="thumb" src="andy MPAP.jpg" = This code serves to display the main image that will appear on the screen.
data-large-img-url="andy MPAP.jpg" = This code aims to display images when in view;
data-large-img-wrapper="preview" = This code aims to enlarge the image during preview.
m.attach({ thumb: '#thumb',large: 'andy MPAP.jpg', mode: 'inside', zoom: 3, zoomable: true }); = This code aims to aim to form an image preview box.

Posted on Utopian.io - Rewarding Open Source Contributors

#github #programing

7 years ago in #utopian-io by andysupriady (51)

Sort:

shreyasgune (58) 7 years ago

Your contribution cannot be approved because it is not as informative as other contributions. See the Utopian Rules. Contributions need to be informative and descriptive in order to help readers and developers understand them.

You can contact us on Discord.
[utopian-moderator]