Question

EDIT:

So, I want to take a different approach to try and clarify what I’m looking for, I’ve been reading as much as I could these last hours and I feel I have a better grasp of how the system works, but I still don’t know how to accomplish my goal.

Reference links:

->SUPERSIZED API

So, I have the following script:

<script type="text/javascript">

    $(document.body).ready(function () {

        if (vars.current_slide == 5){**-I want it to display a div if the slider is the number 5-**     

}       

    });

</script>

My questions are these:

1) What do I add in the – – area to display a div that only shows up when the slider is at the 5th slide?

2) Am I doing the rest right or am I missing something? I created that code so it could be terribly wrong lol, hopefuly I got something right 😛

That’s all, hope this clarifies it.

Thank you all for the help! I’m really excited to start creating my own scripts 😀

---

Alright, so I’ve uploaded the site with the code you posted and it still doesn’t seem to work, I also tried reducing the code to the conditional and the result only but that didn’t work either, mind checking it out?

---

Click Here

Thanks for giving it a thought!

Answer 1

I assume you can manage to create that div using some HTML and CSS.

Now, if I understood right, your question is how you can show certain extra information in that div for certain slides.

The method for setting the contents of a div in jQuery is quite easy:

$("#id_of_div").html("Any <b>HTML</b> content here");

So if you want to set the content of the div to the value of testfield, use

$("#id_of_div").html(testfield);

edit in response to question edit

Unfortunately, Supersized does not provide great triggers – the only option you have is editing your theme files.

Your best option is probably to add the following code to the theme.afterAnimation() function; for the default theme this is located near the bottom of slideshow/theme/supersized.shutter.js.

// current slide is #5
if (vars.current_slide == 5) {
    // Get contents of the 'testfield' field
    var testfield = api.getField(testfield);
    // Set the HTML content of testfielddiv to the value of testfield
    if (testfield != "undefined") {
        $("#testfielddiv").html(testfield);

        // Show testfielddiv (which was hidden for all other slides)
        // The 'fast' argument is for a simple animation; it can be omitted
        // to show without animation, or changed to 'slow' or a number in ms
        $("#testfielddiv").show('fast');
    }
}

else {
    // Hide testfielddiv for any other slide
    $("#testfielddiv").hide('fast');
}