0

I have a static page, which I'm using for viewing pictures, and the javascript does the slide show; however, I would like to dump the pictures in same directory and when page is opened, the javascript will create an array with all the pictures without me having to edit the array for every scenario.... is this possible?... I know javascript has some security restrains when it comes to read from local filesystem. here's the static page and javascript

<!doctype html>

<html lang="en">
<head>
    <title>Picture Show</title>
    <link type="text/css" rel="stylesheet" href="stylesheet.css" />
    <script type="text/javascript" src="slideshow.js"></script>
</head>
<body>
    <!-- Insert your content here -->
    <div id="container">
        <div id="header">
            <h1>Slide Show</h1>
            <a id="link" href="javascript:slideShow()"></a>            
        </div>
        <div id="slideShow">
            <img name="image" alt="Slide Show" src="pics/0.jpg" />
        </div>
    </div>
</body>
</html>

javascript

//javascript code for slideshow

//pictures
var imgs = [ "pics\/0.jpg", "pics\/1.jpg", "pics\/2.jpg", "pics\/3.jpg", "pics\/4.jpg", "pics\/5.jpg" ];
var imgNum = 0;
var imgsLength = imgs.length-1;
var time = 0;

//changing images function
function changeImg(n) {    
    imgNum += n;

    //last position of array
    if (imgNum > imgsLength) {
        imgNum = 0;
    }

    //first position of array
    if (imgNum < 0) {
        imgNum = imgsLength;
    }

    //console.log(images.tagName);
    document.image.src = imgs[imgNum];

    return false;
}

//slideshow function
function slideShow() {
    var tag = document.getElementById('link').innerHTML;
    if(tag == "Stop") {
        clearInterval(time); //stoping slideshow
        document.getElementById('link').innerHTML = "Start";
        document.getElementById('link').style.background = "yellow";
    }
    else { //all other cases come here
        time = setInterval("changeImg(1)", 4000);
        document.getElementById('link').innerHTML = "Stop";
        document.getElementById('link').style.background = "green";
    }
}

window.addEventListener('load', slideShow);
miatech
  • 2,150
  • 8
  • 41
  • 78

1 Answers1

0

It's not possible to automatically read a directory with in-browser javascript because of security issues. You have two options here:

  • Make a multiple file input and let the user select the images to display. He could just use "ctrl+a" inside a directory to select everything ... of course this is bad cuz it requires a file select for every slideshow.

or...

  • Make a server side application that will upload the files or a list with their path. This will do the trick just the way you want, but the application must be installed and running on the machine in order to work. This could be easily achieved with nodejs and I bet you will find a module that will help you.
rafaelcastrocouto
  • 11,781
  • 3
  • 38
  • 63
  • yeah, I know that this kind of task it is probably best done with server side script, but that's exactly what I'm trying to avoid... is it possible to read all files using bash and creating a text file containing all pictures names, and then reading the text file with javascript? – miatech May 21 '14 at 13:46
  • yes it is possible... notice that you will have redo this every time you change any of those files. – rafaelcastrocouto May 21 '14 at 13:48
  • yes, I'm aware... what method from ajax is appropriate for this? – miatech May 21 '14 at 13:55
  • if you aren't using any libraries, then you need to implement a full [cross browser xhr](http://stackoverflow.com/questions/2557247/easiest-way-to-retrieve-cross-browser-xmlhttprequest) ... i suggest you use [jquery load shortcut](http://api.jquery.com/load/) cuz it's easy! – rafaelcastrocouto May 21 '14 at 14:05