带有 Tumblr 的真正简单的照片滑块答案

【问题标题】：Really Simple Photo Slider with Tumblr带有 Tumblr 的真正简单的照片滑块
【发布时间】：2014-05-31 11:42:26
【问题描述】：

我正在尝试为我的 Tumblr 页面实现一个非常基本的照片滑块。我有一些 HTML 和 Tumblr 编码的基本知识，都是自学的，直到现在一切都在膨胀。但是使用 {Photoset} 块被证明有点令人困惑。

我正在尝试使用 {Photos} 块，它将照片集中的每张照片呈现为好像它们自己一样，并带有真正简单的滑块。 {PhotoURL-HiRes} 等均来自 Tumblr。到目前为止，这是我所拥有的：

jQuery:

$(document).ready(function () {
    $('#slideshow-div').rsfSlideshow();
});

HTML：

<div id="slideshow-div">

<!-- 
Set up an initial slide -- this provides an image for users without JavaScript. 
Notice that we've also added the caption for the first slide.
-->
<div class="slide-container">
    <img src="{PhotoURL-HighRes}"
        {block:Caption}alt="{Caption}"{/block:caption}
        title="This is a caption for the first slide" />
    <span class="slide-caption">{block:Caption}{Caption}{/block:Caption}</span>
</div>

还有一些 CSS。这都是在 {block:Photos}{/block:Photos} 之间渲染的。我做错了什么？

编辑：一张图片值一千字，所以一个网页必须值一百万或什么的。这是我理解不佳的结果lol：http://ko-51.tumblr.com/

这里是滑块的链接以及它应该如何工作：http://reallysimpleworks.com/slideshow

【问题讨论】：

您遇到了什么问题？
嗨，Ally，查看我刚刚发布的链接。

标签： javascript jquery tumblr photos

【解决方案1】：

首先，欢迎来到 SO。

这听起来更像是一条评论。但是放在评论框里就很长了。从您的问题来看，我们有很多尽职调查想要帮助您。我们要搞清楚 Tumblr 是如何渲染{block:Photos} 的，还要搞清楚rsfSlideshow() 是什么？

您应该查看浏览器控制台上的 JavaScript 日志，在 Mac 的 Safari 上使用 Opt+Cmd+C。看看是否有一些明显的错误可能会阻止脚本运行。然后查看脚本的示例并查看那里的 HTML，将其与 Tumblr 的呈现进行比较。然后将其与标签匹配。有些滑块需要<li>，有些则不需要。你错过了结束</div>吗？

如果一切都应该工作但没有工作，请转到JSFiddle，粘贴所有脚本和呈现的 HTML。回到这里，我们将能够查看问题所在并为您提供帮助。

祝你好运。

【讨论】：