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:

  1. Setup a free GA account.
  2. Download and unzip the GA tracking example.
  3. Create a new Pro gallery.
  4. Copy the example HTML file into the gallery folder.
  5. Edit the HTML file and enter your GA account id where indicated.
  6. Upload to a web server.
  7. 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:

  • imageURL (String) - relative path to main image.
  • thumbURL (String) - relative path to thumbnail.
  • caption (String) - HTML caption display text.
  • linkURL (String) - optional click URL.
  • linkTarget (String) - optional click target.
getGalleryInfo(): Object

Returns current gallery details as an object. Object properties are as follows:

  • imageCount (int) - number of images in the current gallery.
  • thumbPageCount (int)- number of thumbnail pages.
  • thumbPageSize (int) - number of thumbnails per page.
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.