i have been working on a jquery slideshow that automatically loads an image from a given directory. The slideshow starts by itself but you can stop it and manually view one image after other by pressing next and previous buttons. What i want to do now is to make it interactive so all the visitors seeing it can see it run as i press the buttons back and forward and see what i see in real time.

This is the code:

PHP Code:
<!DOCTYPE html>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> galeria</title>
  <script type='text/javascript' src='jquery.js'></script>
  <style type='text/css'>
    html {background-color:black;}
    #fader {
    margin: 0 auto; 
    width: 1610px;
    height: 400px;
    border:1px solid red;
   #fader * {display:block;}
 .button {
    width: 50px;
    height: 30px;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    position: absolute;
    top: 30px;
  #next {
    right: 850px;
  #prev {
    left: 840px;
  #pause {
    left: 900px;
 #inicio {
    left: 960px;
 <script type='text/javascript'>//<![CDATA[ 
$(function() {
    $('#fader *:not(:first)').hide();
    $('#fader img').css('height', '100%');
    $('#fader img').css('margin', '0 auto');
    $('#fader *').each(function() {
        var img = $(this);
        $('<img>').attr('src', $(this).attr('src')).load(function() {


    var pause = false;
    function fadeNext() {
        $('#fader *').first().fadeOut().appendTo($('#fader'));
        $('#fader *').first().fadeIn();

    function fadePrev() {
        $('#fader *').first().fadeOut();
        $('#fader *').last().prependTo($('#fader')).fadeIn();

    $('#fader, #next').click(function() {

    $('#prev').click(function() {

    $('#pause').click(function() {
        pause = true;

   $('#inicio').click(function() {
        pause = false;

    function doRotate() {
        if(!pause) {
    var rotate = setInterval(doRotate, 10000);
function scd($dir){$files=scandir($dir);sort($files);reset($files);return $files;}
$output='<div id="fader">';

$files as $file){
if (
strpos($file,'.flv') == false) {
$output.='<img src="'.$dir.'/'.$file.'" alt="">';
else {
<iframe src="$dir/$file" style="height:100%;width:100%"></iframe>
 <div class="button" id="next">►►</div>
 <div class="button" id="pause">▌▌</div>
<div class="button" id="inicio">►</div>
 <div class="button" id="prev">◄◄</div>

I wonder if this is possible by using AJAX or json, rather than resorting to more complicated stuff such as java.

Thank you.