Home/ Questions/Q 6385163
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T02:51:54+00:00

how can I write a javascript function called showSlideTwo() that calls the supersized api

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0