通过AJAX将图像加载到jQuery Supersized插件中

Question

I'm trying to dynamically load images via AJAX into the jQuery "Supersized" image slider: http://buildinternet.com/project/supersized/

The AJAX call replaces the images fine, but the play button then becomes unresponsive, and subsequent calls disturb the slide interval timings (slides change faster).

I've tried all the answers (without luck) provided in a similar question here (same code). They suggested it could be a binding issue.

So in the html:

<a href="javascript:brown();">Doeet</a>

Ajax call:

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

Ajax.php:

<?php switch($_GET["action"]){
  case "brown":
  echo "<script type='text/javascript'>
  jQuery(function($){
    $('#supersized').html('');
        $.supersized({          
            slides : [{image : 'image1.jpg'},
                       {image : 'image2.jpg'}]

            });     
    });</script>";
   break; }
?>

Answer 1

do not try to pass the entire javascript code to transmit. only transmit the params u need:

function red(){
  $.ajax({
    url: 'ajax.php?action=brown',
    success: function(data){
      if (data != "") {
        $('#supersized').html('');
        $.supersized({          
          slides : [{image : data}],
          ....
        });   
      }
    }
  })
}

php:

<?php 
switch($_GET["action"]){
    case "brown":
    echo "imagename.jpg";
    break; 
}
?>

and may use

• http://api.jquery.com/jQuery.parseJSON/
• http://api.jquery.com/click/