Using the JavaScript API
Use the JavaScript API to control SimpleViewer from the embedding HTML document. For an example of controlling SimpleViewer-Pro via the JavaScript API, check the /examples/HTML_embed/javascript_api.html file in the Pro download, or view the online demo. Check the example HTML code for details of how to use the API Methods and Events listed below.
To use the JavaScript API you need to
- Set the enableAPI config option to true.
- Set params.allowscriptaccess = "always"; in the embedding HTML document.
Direct Linking and Back Button Support
SimpleViewer-Pro can support direct linking to specific images and the browser 'Back' button via the JavaScript API. View the example and code.
Adding Tracking
Tracking is a way to count the number of internet users who view your content. The JavaScript API allows you add any type of JavaScript tracking to your SimpleViewer-Pro gallery. The API fires events for gallery views and image views. We have provided a HTML code example for tracking via Google Analytics, Google's free tracking service. View the example and code. To add Google Analytics (GA) Tracking to your SimpleViewer-Pro gallery do the following:
- Setup a free GA account.
- Download and unzip the GA tracking example.
- Create a new Pro gallery.
- Copy the example HTML file into the gallery folder.
- Edit the HTML file and enter your GA account id where indicated.
- Upload to a web server.
- Test tracking is working correctly by clicking thru some images. Check your image views are showing up in your GA dashboard. Note that tracking events may take up to 24 hours to show.
Using the ActionScript API
Use the ActionScript API to control SimpleViewer from an embedding Flash Movie or Flex Application. Before using the ActionScript API, you first need to embed SimpleViewer. View details on how to embed SimpleViewer-Pro in Flash or Flex. Check the example code for details of how to use the API Methods and Events listed below.
- For an example of using the API with Flash, check the examples/flash_embed/simpleviewer_flash_embed.fla file in the Pro download, or view the online demo.
- For an example of using the API with Flex, check the examples/flex_embed/ folder in the Pro download, or view the online demo.
API Methods
The following API methods are available:
Method | Description |
show( show: Boolean ) |
Show or hide SimpleViewer. |
setSize( width: int, height: int ) | Set gallery size. |
showImage( index: int ) | Show image by index number. Image indices start at zero. |
showNextImage() | Show the next image. |
showPreviousImage() | Show the previous image. |
toggleAutoPlay() | Toggles AutoPlay mode. |
toggleAudio() | Toggles audio playback. |
toggleFullscreen() | Toggles fullscreen mode. Note: Fullscreen toggle does not work via the JavaScript API due to a security restriction in the Flash Player. |
downloadImage() | Pops the download image dialog box for the current image. Note: Download functionality only works when hosting files on a web server. |
openImageLinkURL() | Opens the current image's LinkURL in window specified by the current image's LinkTarget. |
dispose() | Deletes the SimpleViewer instance and frees up allocated memory. |
showThumbPage( index: int) | Shows the page of thumbnails specified by index. |
getImageInfo( index: int ): Object | Returns image details as an object for the image specified by index. Object properties are as follows:
|
getGalleryInfo(): Object | Returns current gallery details as an object. Object properties are as follows:
|
getThumbPageIndex() :int | Returns index of current thumb page. |
getImageIndex(): int | Returns index of current image. |
API Events
The following Events are fired by SimpleViewer and can be listened for in ActionScript. For JavaScript, the SWF calls a function with the same name as the event name when the event is fired.
Event Name | Description |
svComplete | Fired when SimpleViewer Flash player swf has completed loading. API is now available. |
svMobileComplete | Fired when SimpleViewer mobile player has completed loading. API is now available. |
svImageChange |
Fired when a new image is displayed, either via user interaction or via AutoPlay. Event data contains the new image index. |
svPageChange | Fired when user selects a new thumb page. Event data contains the new thumb page index. |