4

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.

E.E.33
  • 2,013
  • 3
  • 22
  • 34
esafwan
  • 17,311
  • 33
  • 107
  • 166
  • 1
    Those are some pretty useless docs. Throwing terms like 'API' and 'Theme' around with now explanation on how to use either or any example using them (as far as I can tell). What I did understand after looking at "docs" and code for a while, is, that the callback `afterAnimation` exists only within a theme (whatever that is). No possibility to set it as option when initializing the slideshow itself. – polarblau Aug 01 '11 at 22:00

3 Answers3

15

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

Sam Dunn
  • 199
  • 1
  • 4
  • Thank you for that great plugin, Sam! I have a related problem though - it's about calling an API function like goTo(targetSlide). The question has already been asked [here](http://stackoverflow.com/questions/7038700/calling-function-of-a-jquery-plugin-supersized-via-its-api-as-part-of-a-clic), could you perhaps have a look? Thanks! – gstercken Aug 21 '11 at 19:25
  • 1
    FYI you don't seem to have included the /theme/ directory in your downloads, that might be why people are confused. It's on GitHub, though. EDIT: Just realised, I've been downloading the legacy versions like the person above -- thought the big green link was just a heading. Underlined link styling FTW... – Matt Andrews Sep 10 '11 at 16:36
  • 3
    how does the api control work? this is the example from the docs but throws an error; $('#goto').click(function(){ api.goTo(3); }); error is 'Can't find variable: api' – v3nt Nov 10 '11 at 09:55
  • 4
    Sam, can you clarify how to use the api? Its not clear to many users and there is no easy example as well. api is undefined in global scope and its not clear how to access it. – Rajat Dec 15 '11 at 07:28
  • 2
    I'm not understanding how to access the API, since it's undefined. It would be helpful to document it, or a practical example, please Sam. – punkbit May 24 '12 at 10:21
  • I can see how a theme method like goTo() would be called from the core theme. However what I can't figure out is how to actually call the goTo() method of the core itself. I just need to trigger a goTo() call from elsewhere in the code, so I need a handle on the api object or the goTo() method directly. Can you please clarify how this should work? Thanks – Russ Back Feb 12 '13 at 12:44
  • OK, so it looks as though the api object is available in the global scope just by calling api.goTo(). I has assumed this would be namespaced. – Russ Back Feb 12 '13 at 12:50
8

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);
nazzilla
  • 81
  • 1
  • 1
0

You can use this script:

$('.selector').vTicker('init');
    theme.afterAnimation = function() {
    alert('slide changed!');
};
Ravimallya
  • 6,550
  • 2
  • 41
  • 75
nixis
  • 510
  • 5
  • 10