Using jQuery to Embed a Slideshow in a Tumblr Blog

Introduction

Tumblr is a microblogging platform and social networking website that is probably best known for funny pictures, videos, animated GIFs, and of course, NSFW content. Tumblr does a great job of letting all types of people express themselves using all forms of media--except one. You can’t put a slideshow on Tumblr. At least not without some outside help.

That help has arrived with Prizm Cloud. Prizm Cloud is a cloud-based embeddable document viewer that displays more than 300 different file types. Using a simple jQuery plugin, you can now not only embed self-running PowerPoint presentations, but also easily make a slideshow from a multi-page document in almost any format: PDF, DOC, TIFF, JPEG and many more.

Enhancing Your Tumblr Blog with Document Viewing

Embedding a document viewer enables you to show document content in a Tumblr post or other website or blog that you could not otherwise show. But, it also offers a number of other benefits. For example, it enables visitors to view the documents you post without actually downloading them to their devices, which improves security for you and performance for them--especially on mobile devices.

You can customize security by enabling or disabling the Print button, or add a Download button to enable visitors to grab the source file. And you can customize the appearance of the document viewer window in a variety of other ways to make it an attractive and functional component of your online presentation.

Document viewers are great when you want to show documents in their native format, without converting them to HTML and reconfiguring them as web elements to include their content in your blog or site. If you have a PDF or Microsoft Word document you want to present to your visitors, they can click a link to open the document in the viewer and explore it almost as if they had opened it in its native program. But the visitor need not have Word or Adobe Reader installed – the document viewer does all the work. A document viewer frees you to show a document without worrying about whether the visitor has the necessary application to display it. In most cases, it also displays the document far more quickly than opening the document’s native application.

Most document viewers can display Microsoft Office document and PDF files. Some viewers do more, displaying hundreds of file types, including CAD/CAM drawings and dozens of different image file formats. These viewers enable you to show your visitors all sorts of files they probably could not view without the document viewer’s help.

Creating a Sample Tumblr Slideshow Post

To see how easy it is to embed a document viewer in your Tumblr blog, review the following sample steps. They create the example shown here: http://prizmcloud.tumblr.com/.

Start by signing up for a (free) Prizm Cloud account. During the easy signup process, you will enter the website URL where your slideshow file is stored.

After accepting the terms and conditions, you arrive at the My Viewers page, where you will see your new license key in parentheses in the Current Viewer line. You will need this key code to embed the viewer. You can return to the My Viewers page any time to see the key again just by logging in to Prizm Cloud.

Adding the CSS in Tumblr

In Tumblr, you can add the custom CSS like the example below to the template HTML, or by entering it in the Add Custom CSS section under Advanced on the Customize panel.

.documents-for-switching a {
    display:block;
    float:left;
    margin:0 10px 10px;
    border:4px solid white;
}
.documents-for-switching a.active {
    border:4px solid #ddd;
}
.prizmcloud-viewer iframe {
    max-width:100%;
}

Adding the HTML to the Blog Post

To embed the slideshow, create a new blog post in Tumblr, and switch to HTML mode. Paste code like the following. (Pay special attention to the viewertype parameter in the iframe tags; this is the parameter that tells Prizm Cloud to present the multi-page document as a slideshow.)

<div id="prizm-cloud-container">
    <div class="documents-for-switching" id="documents-for-switching"> 
        <a href="http://www.accusoft.com/docs/prizm-cloud-flash-vs-html5.pdf" data-doc-link="http://www.accusoft.com/docs/prizm-cloud-flash-vs-html5.pdf" class="doc-link active"><img src="http://prizmcloud.accusoft.com/img/pc-demo-pdf-thumb-1.gif" /></a>
     <a href="http://www.cdc.gov/phpr/documents/11_225700_A_Zombie_Final.pdf" class="doc-link"><img src="http://prizmcloud.accusoft.com/img/pc-demo-pdf-thumb-3.gif" /></a>
    </div>
    <div class="prizm-cloud-viewer" id="prizm-cloud-viewer">
        <iframe id="viewerBox" width="460" height="630" frameborder="0" src="http://connect.ajaxdocumentviewer.com/?key=[yourPrizmCloudkey]&viewertype=slideshow&document=http://www.accusoft.com/docs/prizm-cloud-flash-vs-html5.pdf&viewerheight=600&viewerwidth=440&printButton=Yes"></iframe>
    </div>
</div>

Adding the jQuery Plugin

Return to the Customize panel and edit the HTML as follows to add the jQuery plugin. (Note that if you change your theme, you will need to update the HTML code again.)

Add three script tags referencing:

1. The jQuery library; for example:

   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

2. The Prizm Cloud.min.js file;

   <script src="<a href="http://media.prizmcloud.com/js/jquery.prizmcloud.min.js">http://media.prizmcloud.com/js/jquery.prizmcloud.min.js</a>"></script>

3. The jQuery call to Prizm Cloud with your custom settings; for example:

   <script>jQuery(document).ready(function($) {
       $('#prizm-cloud-container').prizmcloud({
           viewerheight: 640,
           viewerwidth: 440,
           type: 'slideshow',
           print_button: 'No',
           slideshow: {
                                   animtype: "fade"
                   }
       });
   });</script>

As you can see, embedding a slideshow, or almost any other kind of document, is a snap with Prizm Cloud and its jQuery plugin.

The preceding steps created the following blog entry: http://prizmcloud.tumblr.com/.

Conclusion

Slideshows are compelling content, and can be a great addition to a Tumblr blog. A document viewer not only enables you to add a slideshow and other documents to a Tumblr page, but also does so in a way that is fun and attractive, performs well for the visitor, and distinguishes your blog as one both rich in content and nice to look at.

By the way, if you want to learn more about customization and other things you can do with the Prizm Cloud jQuery plugin, see the Prizm Cloud Plugins and Extensions page.

If you like what you see of Prizm Cloud, you can use it free of charge for up to 5,000 views per month. You can get more information, and see a live demo, at http://prizmcloud.com/.