How To Write A Javascript Function To Load An Explicit Supersized Slide

how can I write a javascript function called showSlideTwo() that calls the supersized api and changes the slide? I tried $('#supersized').api.goTo(2); or $.supersized.api.go

Solution 1:

Make sure that you wrap your new functions in jquery's onready as below. Also it appears that supersized adds a global api object.

http://buildinternet.com/project/supersized/docs.html#api_docs

<scriptsrc="http://localhost/js/supersized.3.2.4.min.js"type="text/javascript"></script><scripttype="text/javascript"><!--
  jQuery(function($){
    $.supersized({
    // Background image
    slides  :  [
                { image : 'http://farm2.static.flickr.com/1029/662880103_b3e1591d50_b.jpg' },
                { image : 'http://farm7.static.flickr.com/6084/6080023793_b965ab5702_b.jpg'     },
               ],
  transition : 1,
  vertical_center : 0,
  autoplay: 0,
  slideshow: 0
  });


  functionshowSlideTwo(){
    api.goTo(2); 
  }); 
</script>

Solution 2:

Ok, got it. First of all the function api.goTo() only works for a supersized object with the option slideshow: 1.

Then it turned out to be a CSS problem. Without any CSS I saw that it generates li-tags containing the images. So, you just have to add the following lines of CSS style to my example above (after changing the option of course (does not matter if the progress.gif images are not there):

    #supersized li { display:block; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:auto; height:auto; background:#111; }   
    #supersized li.prevslide { z-index:-20; }
    #supersized li.activeslide { z-index:-10;}
    #supersized li.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:auto; height:auto; }
    #supersized li.image-loading img{ visibility:hidden; }
    #supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }

Thanks to anyone who spent a thought on this question.