How do i use this api of supersized jquery plugin

Question

Hi am using supersized plugin. I want to change the content in the page depending on what slide is loaded. In the documentation i found the api for that, but couldn't figure out how to do it.

Below is a copy-paste from the documentation

theme.afterAnimation( )

Runs each time a slide transition is completed.

trigger : after each slide transition

http://buildinternet.com/project/supersized/docs.html#theme-after

If i want to prompt alert('slide changed!'); after each slide change how would it be? I just cant understand how these apis' could be used.

Answer 1

I'm the creator of Supersized and I wanted to pop in here and help you straighten this out.

In the actual download, located here, you'll notice that within the slideshow folder there is a theme folder, separate from the js and css folders - this is the area we'll focus on.

Supersized runs in two parts:

1. The base files (js/supersized.3.2.x & css/supersized.css) which contain the base functionality such as transitions, next/prev slide, and all the other essential components.

2. The theme files (located in the theme folder) which allow you to modify the slideshow with customizations, like the one you mentioned, or things like progress bars and custom content for each slide. These are separated to prevent you from losing the customizations every time there is an update to the base files, which was the case in previous versions.

In the download, I have included the Shutter theme, which I intended for people to use as a foundation for their own development. Don't worry about touching the base files - they automatically call the theme files, which is where all of your changes will go.

If you open up theme/supersized.shutter.js, you'll notice there are are number of functions within the theme object literal - this is the place where you would drop in the theme functions described in the documentation. Keep in mind that you will need to update the path on the demo html page to point to this file once you edit it, since by default it points to the minified theme/supersized.shutter.min.js.

If you scroll towards the bottom of supersized.shutter.js, you'll notice the afterAnimation function you're looking for - this is where you can plug in the alert('Slide Changed'); line.

From there you're free to strip out whatever functions you don't need and build out your very own theme.

Hope that helps and a big thank you for using the plugin!

Best, Sam Dunn

Answer 2

I tried to make my own theme and this worked for me:

(function($){
    theme = {
        _init : function(){
            console.log('hi im supersized');                
        },
        afterAnimation:function(){
                console.log('Slide Changed');
        }
    };
})(jQuery);