calling jQuery supersized plugin onclick

Question

I am trying to call the supersized plugin ( http://buildinte.net.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/ ) onclick, so far when I click on my different menus the images are changed, but it looks like html markup build by supersized don't get rebuilt, right now I have this:

html which calls a function brown() onclick:

<ul id="rooms_menu" style="display:none;">
<li><a href="javascript:;" onclick="brown()">menu title</a></li>
<p class="rooms_desc">description text</p>

the html where I echo an ajax response:

<div id="script">

<script>$(function(){
        $.supersized({
                      slides    :   [
                     {image     : 'img/rooms-default.jpg'}
                     //{image     : 'img/rooms-default.jpg'}
                                    ]
                     })
                     })</script>

</div>

brown() is an ajax function:

 function brown(){
      $.ajax({
      url: 'ajax.php?action=brown',
      success: function(data){
        $('#script').html(data);
             }
           })
    
         }

then the ajax.php file loads its content to #script div:

switch($_GET["action"]){
      case "brown":
      echo "<script>$(function(){
         $.supersized({
                   slides :     [
               {image  : 'img/rooms-brown-01.jpg'},
               {image  : 'img/rooms-brown-02.jpg'}
                            ]
                            })
         
                            })</script>";
      break;
      case "rose":  etc.....

so the images are updated when I click for the first time on a menu but if I click another menu title the images are updated too but the slideshow starts messing up, it looks like the html markup is not rebuilt, when I use only one image per menu title(only one image in supersized array) there is no problem. R.

Answer 1

before adding the new script with

$('#script').html(data);

try to call this:

if($.supersized.vars.slideshow_interval){
  clearInterval($.supersized.vars.slideshow_interval);
}

the method then should look like:

function brown(){
  $.ajax({
    url: 'ajax.php?action=brown',
    success: function(data){
      if($.supersized.vars.slideshow_interval){
        clearInterval($.supersized.vars.slideshow_interval);
      }
      $('#script').html(data);
    }
  });

}

Answer 2

Instead of returning the whole script from PHP, you can simply return the image tags (like

<img src="images/image1.jpg" /><img src="images/image1.jpg" />

...). Then in the ajax success callback in place of - $('#script').html(data); - you can do

$('#script').empty();
$('#script').html(data);
$('#script').supersized();

Answer 3

I believe it's the $.supersize.resizenow method which sets everything up, have you tried calling that?

Failing that, do you have a link that is web accessable where you are trying this so I could have a look?

Answer 4

Have you tried unbinding the event before attaching a new one? like this:

switch($_GET["action"]){
      case "brown":
      echo "<script>$(function(){
         $(window).unbind("resize");//add this. you could also add         
                                     //$('#supersized').html('') to remove markup created by the plugin
         $.supersized({
                   slides :     [
               {image  : 'img/rooms-brown-01.jpg'},
               {image  : 'img/rooms-brown-02.jpg'}
                            ]
                            })

                            })</script>";
      break;

You might have to do this because the plugin binds an event to the window and even if you remove the previous html created by the plugin the old event is still binded and it fires twice.

Tell me if you notice any difference

EDIT - i have looked at the code of the plugin. The problem lies, i think, in the command on line 16:

  setInterval("theslideshow()", options.slideinterval);

a function is called at a given interval, and if it's not cleared, when you call the plugin again, a new interval is set and so you have problems with the timing. You could correct the plugin like this. Instead of

    if (options.slideshow == 1){
        setInterval("theslideshow()", options.slideinterval);
    }

put

        firstRunofThisPlugin = true;
    if (options.slideshow == 1){
                if (firstRunofThisPlugin){
                     firstRunofThisPlugin = false;
                }else{
                     clearInterval(linkToTheLastInterval);
                }
        linkToTheLastInterval = setInterval("theslideshow()", options.slideinterval);
    }

What you are doing is save a reference of the setInterval() call and then clear that reference the next time you call the plugin.

This uses two global variables which is bad, but if it solves the problem i can help you rewrite this without using globals.

PS why don't you update the version of the plugin?

Answer 5

Why don't you just load all of the sets and show/hide them as needed?

<script>
  $(function(){
    function selectSet() {
      $(".set").hide();
      $(".set."+$(this).attr("id")).show();
    };
    $(".set.brown").each(selectSet);
  });
</script>

<a href="javascript:;" id="brown" onclick="selectSet()">Choose me!</a>
<a href="javascript:;" id="rose" onclick="selectSet()">No choose me!</a>

<div class="set brown">
  <script>
    $(function() {
      $.supersized({
        slides: [
          {image: 'img/rooms-1.jpg'},
          {image: 'img/rooms-2.jpg'}
        ]
      });
    });
  </script>
</div>

<div class="set rose">
  <script>
    $(function() {
      $.supersized({
        slides: [
          {image: 'img/rooms-3.jpg'},
          {image: 'img/rooms-4.jpg'}
        ]
      });
    });
  </script>
</div>