calling jQuery supersized plugin onclick

Question

I am trying to call the supersized plugin (http://buildinternet.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();