9

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.

2
  • Any further ideas on this? I've attempted every answer in all possible combinations. Replacing the images via an ajax query is easy, but once you do, the play button becomes unresponsive and the more times you call the query the more the slide interval messes up. Oct 25, 2011 at 5:36
  • right, i didnt go further into this because the timeouts always messed up, i think the best option is to try another supersized like script, there are many now.
    – tetris
    Oct 25, 2011 at 11:48

5 Answers 5

4

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);
    }
  });

}
2
+75

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();
2
  • Sorry, if you can give some details about what does not work - whether it does not work at all or has the same issue as before - I can definitely try to help.
    – Abhijit
    Jul 1, 2011 at 10:04
  • ok here is the file : katastar.free.fr/rooms.php item 1 and 2 works , yes it works but the slideshows timing starts messing up
    – tetris
    Jul 2, 2011 at 0:43
2

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?

0
2

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.

P.S. why don't you update the version of the plugin?

6
  • Hello just tried, i still get the same problem: the setTimeOut of each slideshow start messing up together, there's no more need of ajax , the calls can be done just by using an inline onclick event, but ye it still does not work.
    – tetris
    Jul 5, 2011 at 18:15
  • i edited my answer to cancel the earlier setInterval. Try it. a setInterval can be canceled, we must modify the code of the plugin Jul 5, 2011 at 18:15
  • I will reconnect tomorrow, in any case look here: w3schools.com/jsref/met_win_clearinterval.asp it tells you how to clear a setInterval Jul 5, 2011 at 18:41
  • Hi , im using version supersized v 3.2.0 this is the newest version i think, i cant find the line 16 with :setInterval("theslideshow()", options.slideinterval); ??
    – tetris
    Jul 6, 2011 at 17:25
  • i thought you were using that version since you linked to that page...tomorrow i'll lok into the new plugin! :) Jul 6, 2011 at 17:48
2

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>
1
  • Hi, i havent got the time to test any solution, maybe tomorrow or later. cheers.
    – tetris
    Jul 8, 2011 at 19:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.