Are you using high-resolution images on your website? Then probably you are looking to add a zoom effect to your high-resolution images. Zoom effects would allow visitors to view your high-resolution images using zoom-in / zoom-out options.

In this article, I will show you how one can add a zoom effect on high-resolution images using an open-source OpenSeadragon library. In addition to effects, this library provides an option to view the image in full-screen mode.

Add Zoom Effect On Images using OpenSeadragon

For getting started, head over to the OpenSeadragon website and download the library. There are a couple of ways(zip, tar, GitHub) to download this library. Let’s download the zip of a library.

Next, extract the zip. From the extracted folder you have to copy:

• images directory
• openseadragon.min.js and openseadragon.min.js.map files

Inside your project root directory paste the copied images folder. And put the openseadragon.min.js and openseadragon.min.js.map files into your js folder. Create this js folder if it does not exist.

Inside the index.html file add the code below. Here I am using index.html, you can choose any file you wish.

<style>
#zoomImage {
    width: 800px;
    height: 600px;
}
</style>

<div id="zoomImage"></div>

I have added an empty div with the id zoomImage. In this div, our container with a zooming image will load. I also applied some styling for this div element.

To integrate the Zoom effect, you need to include the JavaScript library and the code to generate a zooming effect. Refer to the code below.

<script src="js/openseadragon.min.js"></script>
<script type="text/javascript">
var viewer = OpenSeadragon({
    id: "zoomImage",
    prefixUrl: "images/",
    tileSources: {
        type: 'image',
        url: '1.jpg', //pass the image path to which need to add zoom effect
        buildPyramid: false
    }
});
</script>

We call the method OpenSeadragon() and pass the required parameters in the above code. Here prefixUrl is the path of the images directory copied from the OpenSeadragon library. From the images directory, the library picks up a few icons for zoom in, zoom out, Home, fullscreen, etc. Under the url key of tileSources pass an image path on which you need to add the zoom effect.

That’s it! Now run this index.html file on the browser and you would see the option for zooming effects.

Related Articles

• Login with Google using JavaScript and PHP
• How to Connect Firebase Realtime Database to Your Website Form
• SweetAlert – A Beautiful Replacement for JavaScript Dialog Boxes

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.