Implementing Javascript zoom viewer in Storyline

Nov 15, 2013

Hi everyone,

I'm trying to implement a JavaScript zoom viewer in a course, to allow on-click zooming to any part of an image on a slide, and I know nothing about JavaScript.

I have found an open-source JavaScript zoom viewer that seems like it would be perfect (OpenSeadragon - http://openseadragon.github.io/) with a zip file containing assorted JavaScript files. I found it implemented by someone else on a website here: http://www.windowsazure.com/en-us/documentation/infographics/windows-azure/. Problem is, I don't know how to implement it in a Storyline course, it's my first attempt as using JS.

The OpenSeadragon website says:

OpenSeadragon has no external dependencies. To install, just copy the openseadragon folder into your web root or static files directory, add it to your page, and create a viewer with the OpenSeadragon() function.

Here is an example of basic usage:
    <div id="openseadragon1" style="width: 800px; height: 600px;"></div>
    <script src="/openseadragon/openseadragon.min.js"></script>
    <script type="text/javascript">
        var viewer = OpenSeadragon({
            id: "openseadragon1",
            prefixUrl: "/openseadragon/images/",
            tileSources: "/path/to/my/image.dzi"
        });
    </script>


However, I don't know how that translates into implementing it on a Storyline slide. I've looked at the best practices article here (http://www.articulate.com/support/storyline/javascript-best-practices-and-examples) and am none the wiser. Hoping you can help!

Thanks!

J

8 Replies
Michael Hinze

Hi James, I don't know if you are aware of this but in order to use this zoomer, you first need to convert the image into .dzi format. I couldn't find a converter that would allow me to convert an image AND download it to include in the zoomer directory structure. I did find a site (zoom.it) that allows  you to upload a picture an have it converted into a zoomable page for you, which you could then embed into a Storyline web object. Here is a quick test with a huge panorama pic I found online, converted it with zoom.it and embedded the converted image's URL into a webobject. For some reason this worked in Firefox, Safari and Chrome, but not in IE10.

So, I guess the options are:

1. Figure out how to converted your image(s) into .dzi and then struggle through the JavaScript implementation to have a  zoomer that is hosted on your server, OR

2. Use a service like zoom.it and live with the fact that your image(s) are hosted on a third-party site and their logo is displayed with the player controls, OR

3. Revert back to the built-in Storyline zoom function

Hope that helps a bit.

James Grayson

Hi Michael,

Appreciate your response. I not sure .dzi is a requirement, though, as the Windows Azure example I posted appears to be.png. I don't think my client will be happy with a third-party hosted solution (especially since IE is their preferred browser), and Storyline's native zoom function isn't good for much in this case. If anyone can assist with the JavaScript implementation it'd be great.

J

Michael Hinze

James Grayson said:

Hi Michael,

Appreciate your response. I not sure .dzi is a requirement, though, as the Windows Azure example I posted appears to be.png. I don't think my client will be happy with a third-party hosted solution (especially since IE is their preferred browser), and Storyline's native zoom function isn't good for much in this case. If anyone can assist with the JavaScript implementation it'd be great.

J


Hi James, the code sample you had posted requires .dzi as format for the image tiles. Other possible formats are listed here: http://openseadragon.github.io/#examples-and-features

James Grayson

Understood, and thanks for explaining. Unfortunately I still don't know how to implement any of these formats in Storyline. I guess the example I gave is using a Legacy Image Pyramid, and the basic code sample won't work for that. I suppose I need to use your option #1, figure out how to convert to dzi, and then how to implement the javascript. Not sure I'm any closer than I was, but I appreciate your help!

Michael Hinze

Phil Mayor said:

To implement on a Storyline slide I think you will need to use a web object


That's correct Phil, just like I did in my quick test, this Javscript zoomer would be inserted into Storyline with a webobject. All the 'magic' happens outside of Storyline and the tiled images are also external to Storyline.

Timothy lee

I am not clear you way of adding a zoom viewer is the easiest one. If I handled this problem, I believe I will directly implement an image web viewer that contains the image or document page zooming options, such as, zoom in and out image size, fit image to viewer's size, view image in one to one ratio using javascript controls, check out the detailed on this post on zooming functions.

Tag: image web viewer, zoom in, zoom out

This discussion is closed. You can start a new discussion or contact Articulate Support.