How to Embed a Document as a Self-Running Slideshow in a Website or Blog

Introduction

A self-running slideshow adds life to a website. Not only does a presentation automatically paging through its slides attract attention with motion, but it also enables you to present a greater density of content without sending your visitor to another page and without adding clutter. Studies have shown that slideshows can provide an edge in capturing attention online, and some SEO experts tout slideshows as a strategy for building traffic. Just as a looping slideshow in a kiosk grabs attention at a busy mall or airport, a slideshow in a website makes people stop and pay attention.

There are a variety of ways to create self-running slideshows. But many are difficult for the developer or designer to execute, require the visitor to install a plugin or have the right native application, support only a handful of source media file formats, or entail other compromises.  

This paper presents a method for embedding a self-running slideshow that can use as its source virtually any document: a PowerPoint file, PDF, Microsoft Word file, or almost any other multi-page file. The show runs natively in most browsers, is easy to design and deploy, and offers a range of ways to customize the user experience.

The centerpiece of this approach is the cloud-based document viewer Prizm Cloud. When you use a cloud-based document viewer, you embed a link in an <iframe> or <href> element in your source code that calls the viewer program on the cloud server and opens the document within it. The document itself may still reside on your own server, or it may have been uploaded to the Cloud first, depending on which cloud-based document viewer you choose.

Syntax for Calling the Document into the Slideshow Viewer

No matter which way you choose to present the slideshow viewer within your HTML content, the critical step is phrasing a URL that points to the viewer program and the document file.

Each registered Prizm Cloud user receives a unique key. The URL for displaying a document comprises the Prizm Cloud viewer address (http://connect.ajaxdocumentviewer.com), the key, the full document address (including filename), and any optional parameters, all in the following syntax:

http://connect.ajaxdocumentviewer.com?key=value&document=URL_of_document&optional_parameter_name=value

For example, suppose that:

• Your key is 12345
• The direct address to your document is http://www.mydoc.com/presentation.pdf

A text or image link with the following URL opens your document in a new browser tab/window, using default values for all optional parameters.

http://connect.ajaxdocumentviewer.com?key=12345&document=http://www.mydoc.com/presentation.pdf

Note: For a Prizm Cloud slideshow, you can use any multi-page document file in any of the more than 300 file types Prizm Cloud supports. A PowerPoint file will work, but so will a multi-page PDF, or Word file, XML file, EPS, multi-page JPEG and many more types. Because the cloud-based document viewer plays the show itself, your visitors do not need the file type’s native program or any plugin or other player. The document must be stored in a publicly accessible location; if you don’t have sufficient access to a server, you can link directly to a document in a Dropbox folder.

To phrase a URL that plays a slideshow, you need to include one optional parameter: viewertype. To apply an optional parameter, simply add an ampersand (&) after the document filename, followed by the parameter name, an equals sign (=), and the setting you want to apply. To configure the URL in the previous example as a slideshow, you would add a viewertype value of slideshow as shown below:

http://connect.ajaxdocumentviewer.com?key=12345&document=http://www.mydoc.com/presentation.pdf&viewertype=slideshow

Note that there are many other parameters available for customizing the user experience; for example, there are parameters that define the size of the viewer box and the toolbar, display or hide certain toolbar buttons or change the toolbar color, apply encryption, and more. For every parameter there is a default setting used when you omit the parameter altogether.

There are a number of slideshow-specific parameters as well, such as:

To apply multiple parameters, string them together following the filename. For example, the URL below specifies that the slideshow from the previous example should appear in a box 600 pixels high by 800 pixels wide, and hides the controls so that the user cannot manually control the show:

Embedding the Slideshow as a Layout Element

Using an <iframe> element, you can incorporate a slideshow into the layout of your web page (or HTML-based blog post, email message or other HTML publication). This is an especially useful approach when you are presenting links to multiple documents you want to swap into the same box, or when there’s a single document you want to present as soon as the visitor arrives at your page--an ideal formatting choice for a self-running slideshow.

The image below shows a slideshow in the Prizm Cloud viewer in an <iframe>, beneath a banner in the layout.

The syntax for the URL (src) portion of the <iframe> element is the same as shown earlier.

<iframe seamless width=600" height="650" allowtransparency="true" src="http://connect.ajaxdocumentviewer.com?key=12345&document=http://www.mydoc.com/presentation.pdf&viewertype=slideshow&showcontrol=no"> <p>Your browser does not support iframes.</p> </iframe>

Coding through Third-Party Content Management Platforms

Prizm Cloud features a growing family of plugins and extensions for integration with third-party content management platforms like WordPress, Joomla!, Drupal, Magento and Umbraco. The implementation differs by platform, but essentially the plugins integrate Prizm Cloud with the platform’s editor or other tools to facilitate the insertion of PowerPoint slideshows or other documents.

For example, installing the Prizm Cloud WordPress plugin adds a Prizm Cloud button to the toolbar in the WordPress content editor, as shown below.

Clicking the button opens a dialog box that collects such information as the URL of the document you want to display and the type of viewer: HTML5, Flash or Slideshow. After you select Slideshow, options for customizing the slideshow appear. Selections made from these options will add and modify parameters in the resulting code.

After the dialog closes, the plugin inserts a WordPress shortcode like the following into the WordPress editor, embedding the slideshow in the WordPress page. As you can see, you can easily configure the same parameters for WordPress that you can use in straight HTML, with a slightly different syntax.

[prizmcloud key="12345" type="slideshow" document="http://www.mydoc.com/presentation.pdf"]

Similar capabilities are enabled by the plugins for the other platforms, like Joomla! and Drupal. The full list of platforms is available at http://www.prizmcloud.com/plugins-and-extensions.html.

Conclusion

Because of the popularity and longevity of PowerPoint, slideshows are a mature and refined content delivery mechanism that is well understood by everyone. But the applicability of this medium online has been hampered by inefficient, proprietary tools and limited browser support for a broad range of filetypes. As a new generation of cloud services like Prizm Cloud takes root, web designers and developers will take greater advantage of the wealth of slideshow content available, and the ease with which it can now be created and deployed.

About the Author

Ned Averill-Snell is a computer journalist and author. A past contributing editor to DATAMATION and Inside Technology Training magazines, he is the author of Macromedia Contribute 3 in a Snap and Sams Teach Yourself to Create Web Pages in 24 Hours, among other titles.