Adding a Magnifier Effect to an Image

In

Sparkle

Image Magnifier
Example Image
Example Image

In order to create this effect, you will need to do two things. Firstly, Add a high resolution image to a folder somewhere on your hosting domain, preferably in its own folder and at a size that represents the size of the image when magnified.  This will be the ‘remotely located image source’


The second step is relatively straight forward. On your Sparkle page you will add an embed object containing the html, css and javascript needed to show the effect. The code can be downloaded from HERE. Open the code file in a plain text editor and change the source file name to the URL of your remotely located image source. You can also change the dimensions of the displayed image (in this example, it’s set to 500 x 500 px.)


The effect will be seen when viewed in a browser.