Supersized, show a div depending on the slide

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

That's all, hope this clarifies it.

Thank you all for the help! I'm really excited to start creating my own scripts :D

---

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');
}

Answer 2

Is simple:

1. Open the file: supersized.shutter.js

2. Find out the following line:

    slide_current: '.slidenumber', // Current slide number 

3. This class ".slidenumber" contain the current number slide. Then, you can use it in your page:

    <div class="slidenumber"></div>