Location: PHPKode > scripts > MySQL Slideshow > ie.html
<!--
// MySql Slideshow Example: Browser Side Javascript Ajax Version

// Here is the example of a slide show.
// The HTML for this example only has the <noscript> tags all the rest is handled by the Javascript
//
// The style is to add borders and padding to the table.

// In this example I use the jQuery Javascript library. You could code it all without jQuery but it would be harder.  When the
// start button is clicked the PHP class library is called via Ajax (the $.get() jQuery function) with the ids[inx++] argument.
// inx was initialized to zero and each Ajax call increments it by one. The loadpic() function is called the first time. The image
// is fetched and a timer is started with a 5 second delay and a callback to the loadpic() function. After 5 seconds the loadpic()
// function is called again and the next image is loaded.  The $("#image").html("<img src='" + data + "'/>"); is more jQuery which
// basically gets the "div" element by id and adds the html code for the image. This could all be done with standard DOM calls but
// it would be harder.  After loading the image the loadpic() function checks to see if the index value inx is at the end of the
// ids array and if so resets inx to zero. The timer is reset for 5 seconds (wash, rinse, repeat).  The "Stop" button just does a
// clearTimeout() to stop the whole process.
-->

<html>
<head>
   <title>MySql Slideshow Example: Ajax Version</title>
   
   <style type="text/css">
#displayAllImageInfo * {
  border: 1px solid black;
  padding: 0 10px;
}
   </style>

   <!-- We are using the jQuery Javascript library -->
   <script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>

  <script type="text/javascript">
// This is the javascript that works with IE

var ids = new Array;
var inx = 0; // index starts at zero
var timerid; // for use by clearTimeout()
var reg=/<::subject::>(.*)<::description::>(.*)/;
var images = new Array;
var infos = new Array;

// setTimeout callback function.
// NOTE: in both Ajax calls via $.get() if you really want the timing to include the network time you
// should do the next setTimeout in the $.get() callback function. As this code is if th network takes a long
// time we could timeout before the image was received.

// In this IE version we have initially cached all of the images in inmages and the info in infos

function loadpic() {
  $("#image").html("<p>Image: " + (inx+1) + "</p><img src='" + images[inx].src + "'/>");
  $("#image").append("<p>Subject: " + infos[inx][0] + ", Description: " + infos[inx][1] +"</p>");
  if(++inx > ids.length-1) { inx = 0 };
  timerid = setTimeout("loadpic()", 5000);
}

jQuery(document).ready(function($) {
  $("noscript").after('<h1>Slideshow Example: Ajax Version</h1>\
<p style="color: red">Microsoft Internet Explorer Version, because Microsoft can not do it like anyone else!</p>\
<button id="start">Start</button><button id="stop">Stop</button><br>\
<div id="image"></div>');

  $("#stop").hide();

  // We get all the IDS and then precache all of the images

  $.get("mysqlslideshow.php", {ids : 1}, function(data) {
    // data is a list of ids "'1','2'..."
    ids = data.split(',');

    $.ajaxSetup({async: false}); // do the following synchronously so the infos array is filled properly

    // Now load all of the images and get the info
    for(var i=0; i < ids.length; ++i) {
      images[i] = new Image;
      images[i].src = "mysqlslideshow.php?image=" + ids[i] + "&type=raw";

      // do this synchronously
      
      $.get("mysqlslideshow.php", {info: ids[i]}, function(data) {
        var m = reg.exec(data);
        infos[i] = new Array(m[1], m[2]);
      });
    }
    $.ajaxSetup({async: true}); // back to default
  });
  
  // Put the table after the image div
  $.get("mysqlslideshow.php", {table: 1}, function(data) {
    $("#image").after(data);
  });

  // Start and Stop button click event
  $("#start").click(function() {
    $("#start").hide();
    $("#stop").show();
    $("#displayAllImageInfo").hide(); // once we start hide the table
    loadpic();
  });

  $("#stop").click(function() {
    clearTimeout(timerid);
    $("#stop").hide();
    $("#start").show();
  });
});
//-->
   </script>

<![endif]-->

</head>

<body>
<noscript>
   <h1>Javascript Not Available</h1>
   <p>Your browser does not support Javascript or you have it disables. You can view a server side version by clicking
      <a href="serverside.php">Server Side Example</a></p>
</noscript>

</body>
</html>
Return current item: MySQL Slideshow