Storyline tips and tricks

Using Web Objects in Articulate Storyline to embed images that magnify when you hover over them

Storyline zoom image

This post is inspired by Melissa Milloway’s post “Zoom in to this Storyline && jQuery Video Tutorials on Magnifying Images“. All I have done is taken the code to create Web Objects instead of modifying the published Storyline output. This means you can place the ‘zoomy’ images anywhere in your course and have multiple images.

For each image there is a separate folder that contains the image, plus html file plus the zoom.js file. The html file is called index.html as required by Storyline to insert a web object. I placed the image folders into my Dropbox public folder so I could use a public link for the index.html when inserting the web object. I used the name image1.jpg for the image. This means that to create multiple web objects all that is required to to duplicate the folder and replace the image with another photo but keep the name image1.jpg.

Try it

You can see my sample and get links to download my index.html and zoom.js …

Demo