How to write a javascript function to load an explicit supersized slide

Question

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.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>

And what exactly is the 'supersized' api? Provide a more detailed example/sample and you will get better help. — josh.trow, Aug 25 '11 at 21:50
Supersized is a jquery plugin that can size images according your browser size using jquery (http://buildinternet.com/project/supersized/docs.html). Maybe my problem is only jquery (http://docs.jquery.com/Main_Page) related. I have problems in understanding how to handle variable scope and "javascript objects". — spikey, Aug 26 '11 at 05:10
I debuged the supersized library and saw that I have to set slideshow:1, or the goTo() function will be left without action. But now the image 2 just blinks and immediately fades back to 1 — spikey, Aug 28 '11 at 05:53
If I click the link a second time, the alert correctly shows 'title image B'. So, it is possibly just a CSS problem? — spikey, Aug 28 '11 at 06:21

score 1 · Answer 1 · answered Aug 25 '11 at 21:57

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

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

answered Aug 25 '11 at 21:57

nottombrown

515
1
6
13

Thank you for answering. I suppose you are addressing the ready() function. But there is no such function used in your code. Am I correct that you mean, that the ready function has to be used later to call the showSlideTwo() function? If I call showSlideTwo() in another script block on the same page it is saying that the function is undefined. – spikey Aug 26 '11 at 05:13
I cant seem to get hold of the api object. You mentioned its a global object but its undefined when I try to access it. It seems to be only defined within the jQuery(function($){}); scope. Any pointers why? – Rajat Dec 15 '11 at 06:39

spikey · Accepted Answer · 2011-08-28T15:16:37.727

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.

How to write a javascript function to load an explicit supersized slide

2 Answers2

Linked