使用jQuery嵌入幻灯片中的tumblr博客

程序员文章站 2022-03-28 20:59:16

...

这篇文章是在为我们的赞助商在CodeProject上的产品展示部分。这些评论，旨在为您提供我们认为对开发者很有用的价值，产品和服务的信息。

介绍

tumblr是一个微博平台，而且可能是最出名的有趣的图片，视频，动画GIF，当然，NSFW内容的社交网站。tumblr确实让所有类型的人表达自己使用所有形式的媒体的一个伟大的工作 – 只有一个除外。你不能把一个幻灯片到QQ空间分享。至少在没有一些外部的帮助。

这种帮助已经到达了与云的Prizm。PRIZM云是一种基于云计算的嵌入文件浏览器，显示超过300个不同的文件类型。用一个简单的jQuery插件，你现在不仅可以嵌入自运行的PowerPoint演示文稿，还容易制作幻灯片从多页文档在几乎任何格式：PDF，DOC，TIFF，JPEG等等。

提高你的QQ空间分享博客与文档查看

嵌入文件浏览器，可以显示在QQ空间分享职位或其他网站或博客，你不能以其他方式显示文档内容。但是，它也提供了许多其他好处。例如，它使访问者查看您发布的文件，而无需实际下载到他们的设备，从而提高了安全性，为您和为他们的表现 – 尤其是在移动设备上。

您可以启用或禁用打印按钮自定义的安全性，或添加一个下载按钮，让游客抢的源文件。你也可以在其他各种方法，使之成为有吸引力和功能的在线演示的组件自定义文档查看器窗口的外观。

文件浏览器是伟大的，当你想显示文件原始格式，无需将其转换为HTML和重新配置他们的网络元素，包括他们在您的博客或网站内容。如果你有你想要呈现给您的访客一个PDF或Microsoft Word文档，他们可以点击一个链接，在浏览器中打开该文档，并探索它仿佛他们已经打开了它的原生程序。但游客不需要安装Word或Adobe Reader – 文档查看器做所有的工作。文档查看器释放你展现一个文件，而不用担心访问者是否具有必要的应用程序来显示它。在大多数情况下，它也远比打开文档的原生应用程序更快速地显示文档。

大多数文档查看器可以显示Microsoft Office文档和PDF文件。一些观众做多，显示数百种文件类型，包括CAD / CAM绘图和几十种不同的图像文件格式。这些观众使您能够显示您的访客各种文件，他们可能无法查看无文档查看器的帮助。

创建示例QQ空间分享幻灯片帖子

要看到它是多么容易嵌入文件浏览器在你的tumblr博客，查看下面的示例步骤。他们创造此处所示的例子：http://prizmcloud.tumblr.com/。

首先签约的（免费）的Prizm云帐户。在简单的注册过程中，您将进入的地方你的幻灯片文件存储在网站的网址。

接受条款和条件后，就到了我的观众页面，在这里你会看到括号新的许可证密钥在当前浏览器线路。您将需要此关键代码嵌入观众。您可以返回到我的观众页面随时再次看到关键刚刚登录到云计算的Prizm。

使用jQuery嵌入幻灯片中的tumblr博客

博客分类：网络编程互联网 jQuery幻灯片tumblr博客QQ空间分享

添加在QQ空间分享的CSS

在QQ空间，你可以象下面这样的HTML模板的例子，或在高级下的自定义面板上的添加自定义CSS部分进入其添加自定义的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到博客文章

要嵌入的幻灯片，在QQ空间创建一个新的博客文章，并切换到HTML模式。粘贴代码如下所示。（要特别注意的viewertype在参数的iframe标签，这是告诉的Prizm云呈现多页文档为幻灯片的参数。）

<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代码。）

新增三个脚本标记引用：

jQuery库，例如：

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

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

jQuery的调用的Prizm云与您的自定义设置，例如：

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