Really Simple Photo Slider with Tumblr

Question

I'm trying to implement a very basic photo slider for my Tumblr page. I have some basic knowledge of HTML and coding with Tumblr, all self-taught, and everything has been swell up 'til now. But working with the {Photoset} block is proving to be a little confusing.

I'm trying to use the {Photos} block, which renders each photo of a photoset as if they were by themselves, with the ReallySimple slider. {PhotoURL-HiRes}, etc. are all fed from Tumblr. Here's what I have so far:

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>

There's some CSS, too. This is all rendered between {block:Photos}{/block:Photos}. What am I doing wrong?

EDIT: A picture is worth a thousand words so a webpage must be worth like a million or something. Here's the result of my poor understanding lol: http://ko-51.tumblr.com/

Here's a link to the slider and how it SHOULD function: http://reallysimpleworks.com/slideshow

What is the problem you are having? – Ally Apr 16 '14 at 14:31 — Ally, Apr 16 '14 at 14:31
Hi Ally, check the link I just posted. – Matthew Apr 16 '14 at 19:23 — Matthew, Apr 16 '14 at 19:23

score 0 · Answer 1 · answered Apr 16 '14 at 15:28

First, welcome to SO.

This might sound a lot more like a comment. But it's very long to put it in the comment box. From your questions, there are a lot of due diligence from us who wants to help you. We need to find out how Tumblr renders the {block:Photos}, and we need to find out what's rsfSlideshow()?

You should look at the JavaScript log on your browser's console, Opt+Cmd+C on Mac's Safari. See if there are some obvious error that might stop the script to run at all. Then look at the script's examples and look at the HTML there, compared it to what Tumblr's render. Then match it tag-to-tag. Some sliders require <li>, some don't. Are you missing the closing </div>?

When everything is supposed to work but doesn't, go to JSFiddle, paste in all the scripts and the rendered HTML. Come back here and we'll be able to see what went wrong and help you.

Good luck.

Really Simple Photo Slider with Tumblr

1 Answers1