How To Add Zoom Effect On Images Of High Resolution

Are you using high-resolution images on your website? If yes, then you are probably looking to add a zoom effect on images. Adding zoom effects on images can allow you to view your high-resolution images using zoom in / out options.

In this article, I will show you how one can add a zoom effect on the high-resolution image using an open-source OpenSeadragon library. Using this library, you can also 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 you can download the library, for now just download the zip of a library.

Once you downloaded the library, extract the zip, rename this folder to ‘openseadragon’. Move this library folder in your project root directory.

Create a index.html file and placed the below code in it.

<html>
    <head>
        <title>Openseadragon</title>
    <style>
    #openseadragon1 {
	    width: 800px;
	    height: 600px;
	}
    </style>
    </head>
    <body>
        <div id="openseadragon1"></div>
    </body>
</html>

Here, we just add an empty div with the id ‘openseadragon1’. In this div, our container with a zooming image will load. I also added some styling for this div container.

Next, we need to include the JavaScript library and add the code which will generate a zooming effect.

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

In the above code, we call the method OpenSeadragon and pass the required parameters. Here ‘prefixUrl’ is the path of an ‘images’ directory from the ‘openseadragon’ folder. From the images directory, the library picks up a few images for zoom in/out, Home, etc. Under the ‘url’ key of ’tileSources’ pass 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.

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

1 thought on “How To Add Zoom Effect On Images Of High Resolution

  1. Hello sir
    Your article is good but i have a question .
    Did your method can zooming big image without generate XML file ?
    Can you answer me by e-mail ?

Leave a Reply

Your email address will not be published. Required fields are marked *