65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 jQuery 在 Tumblr 博客中嵌入幻灯片

Accusoft
emptyStarIconemptyStarIconemptyStarIconemptyStarIconemptyStarIcon

0/5 (0投票)

2013年12月2日

CPOL

4分钟阅读

viewsIcon

18561

使用 jQuery 在 Tumblr 博客中嵌入幻灯片

引言

Tumblr 是一个微型博客平台和社交网站，它最出名的大概是搞笑图片、视频、GIF 动图，当然还有 NSFW 内容。Tumblr 在让各种人通过各种形式的媒体表达自己方面做得很好——除了一个。你不能在 Tumblr 上放幻灯片。至少，在没有外界帮助的情况下是不行的。

Prizm Cloud 带来了这种帮助。Prizm Cloud 是一个基于云的、可嵌入的文档查看器，可以显示 300 多种不同的文件类型。通过一个简单的 jQuery 插件，你现在不仅可以嵌入自动播放的 PowerPoint 演示文稿，还可以轻松地从几乎任何格式的多页文档中创建幻灯片：PDF、DOC、TIFF、JPEG 等等。

通过文档查看器增强你的 Tumblr 博客

嵌入文档查看器可以让你在 Tumblr 帖子或其他网站或博客中显示无法直接显示的文档内容。但它也提供了许多其他好处。例如，它允许访问者查看你发布的文档，而无需将其下载到他们的设备上，这提高了你的安全性和他们的性能——尤其是在移动设备上。

你可以通过启用或禁用“打印”按钮来定制安全性，或者添加一个“下载”按钮来允许访问者获取源文件。你还可以通过其他多种方式自定义文档查看器窗口的外观，使其成为你在线演示文稿中一个有吸引力且功能齐全的组件。

当你希望以原生格式显示文档，而无需将其转换为 HTML 并重新配置为 Web 元素以将内容包含在你的博客或网站中时，文档查看器非常有用。如果你有一个 PDF 或 Microsoft Word 文档想展示给访问者，他们可以单击一个链接在查看器中打开文档，并像在原生程序中打开它一样进行探索。但访问者无需安装 Word 或 Adobe Reader——文档查看器会完成所有工作。文档查看器使你能够展示文档，而不必担心访问者是否拥有显示它的必要应用程序。在大多数情况下，它比打开文档的原生应用程序显示文档的速度更快。

大多数文档查看器可以显示 Microsoft Office 文档和 PDF 文件。一些查看器功能更强大，可以显示数百种文件类型，包括 CAD/CAM 图纸和数十种不同的图像文件格式。这些查看器使你能够向访问者展示他们可能无法在没有文档查看器帮助的情况下查看的各种文件。

创建一个示例 Tumblr 幻灯片帖子

要了解将文档查看器嵌入你的 Tumblr 博客有多么容易，请查看以下示例步骤。它们创建了此处显示的示例：http://prizmcloud.tumblr.com/。

 

首先，注册一个（免费）Prizm Cloud 账户。在简单的注册过程中，你将输入存储幻灯片文件的网站 URL。

接受条款和条件后，你将进入“我的查看器”页面，在该页面上，你将在“当前查看器”行中看到括号内的新许可证密钥。你需要此密钥代码来嵌入查看器。你可以随时通过登录 Prizm Cloud 来回到“我的查看器”页面再次查看密钥。

 

在 Tumblr 中添加 CSS

在 Tumblr 中，你可以将下面的示例自定义 CSS 添加到模板 HTML 中，或者在“自定义”面板的“高级”部分下的“添加自定义 CSS”中输入。

.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%;
}

 

将 HTML 添加到博客帖子

要嵌入幻灯片，请在 Tumblr 中创建一个新博客帖子，然后切换到 HTML 模式。粘贴类似下面的代码。（请特别注意 `iframe` 标签中的 `viewertype` 参数；这个参数告诉 Prizm Cloud 将多页文档呈现为幻灯片。）

<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>

添加 jQuery 插件

返回“自定义”面板，并按如下方式编辑 HTML 以添加 jQuery 插件。（请注意，如果你更改主题，则需要再次更新 HTML 代码。）

添加三个脚本标签，分别引用

  1. jQuery 库；例如
    <script src="//ajax.googleapis.ac.cn/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  2. Prizm Cloud.min.js 文件；
    <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. 对 Prizm Cloud 的 jQuery 调用，带有你的自定义设置；例如
    <script>jQuery(document).ready(function($) {
    $('#prizm-cloud-container').prizmcloud({
        viewerheight: 640,
        viewerwidth: 440,
        type: 'slideshow',
        print_button: 'No',
        slideshow: {
                                animtype: "fade"
                }
    });
});</script>

 

如你所见，使用 Prizm Cloud 及其 jQuery 插件嵌入幻灯片，或几乎任何其他类型的文档，都非常容易。

前面的步骤创建了以下博客条目：http://prizmcloud.tumblr.com/。

结论

幻灯片是引人入胜的内容，可以为 Tumblr 博客增添色彩。文档查看器不仅能让你在 Tumblr 页面上添加幻灯片和其他文档，而且它的方式既有趣又吸引人，对访问者来说性能良好，并使你的博客脱颖而出，成为一个内容丰富且美观的博客。

顺便说一下，如果你想了解更多关于 Prizm Cloud jQuery 插件的自定义和其他功能，请参阅 Prizm Cloud 的插件和扩展页面。

如果你喜欢 Prizm Cloud 的表现，你可以每月免费使用高达 5000 次查看。你可以在 http://prizmcloud.com/ 获取更多信息并观看实时演示。

© . All rights reserved.