title: JQuery slideshow from php array
body: <p>i have this code which fetch all image with same id and storet in array 
  and i want to display it as slideshow , right know the image display near to each other how can i use <code>Jquery</code> slide show </p>
  
  <p>//PHP File (Server side) </p>
  
  <pre><code>&lt;?php
   $dbhost = '127.0.0.1';
  $dbuser = 'root';
  $dbpass = '';
  $dbname = 'images';
  
   $sql2 = "SELECT img FROM image WHERE L_ID=:id";
  try {
      $con = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);  
      $con-&gt;setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
      $con-&gt;query('SET NAMES utf8');
      $stmt = $con-&gt;prepare($sql2);  
      $stmt-&gt;bindParam("id", $_GET["L_ID"]);
      $stmt-&gt;execute();
      $img = $stmt-&gt;fetchAll(PDO::FETCH_OBJ); 
      $con = null;
      echo '{"pics":'. json_encode($img) .'}'; 
      } catch(PDOException $e) {
      echo '{"error":{"text":'. $e-&gt;getMessage() .'}}'; 
  }
  
  ?&gt;
  </code></pre>
  
  <p>//js File </p>
  
  <pre><code>    $('#detailsPage').live('pageshow', function (event) {
          var id = getUrlVars()["L_ID"];
          $.getJSON(serviceURL + 'getimage.php?L_ID=' + id, displayImg);
          });
      function displayImg(data) {
  
  
  
  
  
      var imgs = data.pics;
      console.log(imgs);
      for(var j=0;j&lt;imgs.length;j++)
      {
          $('#pic').append('&lt;img src="' + imgs[j].img + '"width=112 height=112/&gt;');}
  
      $('#actionList').listview('refresh');
  
  }
  
   function getUrlVars() {
  var vars = [],
  hash;
  var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&amp;');
  for (var i = 0; i &lt; hashes.length; i++) {
      hash = hashes[i].split('=');
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
  }
  return vars;
   }
  </code></pre>
  
  <p>//Html
          </p>