Hi,

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>
<html>
<head>
  <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;
    display:block;
    overflow:hide;
    }
   #fader * {display:block;}
 .button {
    background-color:gold;
    width: 50px;
    height: 30px;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    position: absolute;
    top: 30px;
    display:block;
    cursor:pointer;  
   }
  #next {
    right: 850px;
    top:420px;    
   }
  #prev {
    left: 840px;
    top:420px;   
   }
  #pause {
    left: 900px;
    top:420px;
    color:orange;
   }
 #inicio {
    left: 960px;
    top:420px;
    color:green;  
   }
  </style>
 <script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(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() {
        fadeNext();
    });

    $('#prev').click(function() {
        fadePrev();
    });

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

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

    function doRotate() {
        if(!pause) {
            fadeNext();
        }    
    }  
    var rotate = setInterval(doRotate, 10000);
});
});//]]>
</script>
</head>
<body>
<?php
function scd($dir){$files=scandir($dir);sort($files);reset($files);return $files;}
$output='<div id="fader">';
$dir='imagenes';
$files=scd($dir);

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


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

Thank you.