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

$.supersized.api.goTo(2);

and it gave me the following message in chrome: "Cannot call method 'goTo' of undefined"

Thank you very much.

This is what I tried in detail:

<script src="http://localhost/js/supersized.3.2.4.min.js" type="text/javascript"></script>
<script type="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
  });
});          
// --></script>

<script type="text/javascript"><!--
  function showSlideTwo(){
    $("#supersized").api.goTo(2); 
//  or 
// $.supersized.api.goTo(2); 

  }
// --> </script>

This is a complete html page, defining two slides. Clicking on the link should change to slide 2 (I even tried nextSlide()) and it does not work. The api seems to be available because the title can be read and is correctly shown with the alert.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="js/supersized.3.2.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
  jQuery(function($){
    $.supersized({
    // Background image
    slides  :  [
                { image : 'http://farm2.static.flickr.com/1029/662880103_b3e1591d50_b.jpg', title : 'title image A'  },
                { image : 'http://farm7.static.flickr.com/6084/6080023793_b965ab5702_b.jpg', title : 'title image B' },
               ],
  transition : 1,
  vertical_center : 1,
  autoplay: 0,
  slideshow: 0
  });

  }); 
</script>
        <style type="text/css"> 
    #supersized { position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
    #supersized img{ width:auto; height:auto; 开发者_开发百科position:relative; outline:none; border:none; }    
    #supersized a { z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; display:block; }
    #supersized a.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:100%; }
    #text_content, #text_content a {color: fff}
        </style> 
</head>
<body>
<div id="text_content">
Testpage:<br/>
<a href="#" id="testbutton" >click to show slide two</a>
</div>
<script>
$(document).ready(function(){

$("#testbutton").click(function(){
    var slideTitle = api.getField('title');
    alert(slideTitle); // correctly shows 'title image A', so the api call works
    api.goTo(2); // This does not switch the image as expected
    // api.nextSlide(); // -> does not do anyhting

});
});

</script>    
</body>
</html>

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

<script src="http://localhost/js/supersized.3.2.4.min.js" type="text/javascript"></script>
<script type="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
  });


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

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.