calling jQuery supersized plugin onclick

Viewed 3472

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.

5 Answers
Related