SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    May 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Reading all Images

    Hi,
    I have a directory in which i have multiple images..
    In javascript i want to reall all the image files from the directory and display it as a slie show.
    The images can be added to the directory at the time when the slideshow is running, so that is the reason i dont want to specify any image name in the code.
    What i am sure is that the image file extension will be ".Jpg"


    Thanks in advance.

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This can be done, but you need to have some sort of server side code to return the names of the images.

    There are two ways really, you can use the server side code to generate an javascript array of the file names, or you can use ajax to call the server side code which will return an XML document containing the file names.

    Both are easily done but using server side code to generate the array is the easiest and probably the best.


  3. #3
    SitePoint Member
    Join Date
    May 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts View Post
    This can be done, but you need to have some sort of server side code to return the names of the images.

    There are two ways really, you can use the server side code to generate an javascript array of the file names, or you can use ajax to call the server side code which will return an XML document containing the file names.

    Both are easily done but using server side code to generate the array is the easiest and probably the best.
    Ya server side code is fine but what if a new image has been added when the slide show is running.
    And i cant use AJAX.. Project Limitations
    I was thinking if i can do it purly by JS the it would have been gr8.
    Thanks Anyways.

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only other way I can suggest is to enable indexing on the image folder, and then using an iframe, display that page.

    Then using javascript, you can read the pages html, and get the names of the images. Every minute or so, tell it to refresh, and then load the images again.


  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by deepusurana View Post
    Ya server side code is fine but what if a new image has been added when the slide show is running.
    Then the browser window will need to be refreshed to update its list from the server.

    Quote Originally Posted by deepusurana View Post
    And i cant use AJAX.. Project Limitations
    I was thinking if i can do it purly by JS the it would have been gr8.
    JavaScript is not capable of accessing the filesystem. The server really is the only way.

    Someone has suggested opening up your images directory so that another window can interrogate it. While that's possible, it's very tricky to achieve, and leaves some gaping security issues.

    Leave the file system to the server and all will be right.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure how there are gaping security issues? Setting the folder to index will display the contents of the folder as links. If the OP is wanting to show said images in a slide show, then there is no security issues as the user will end up showing the files.

    If your worried about security, you can replace indexing and use a PHP file to output the required data and then use javascript to access the files.

    Heres an example using the indexing (has to be on the same domain):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="all" />
            <style type="text/css">
                #files {
                    width: 1px;
                    height: 1px;
                }
            </style>
            <script type="text/javascript">
                function getFiles(w) {
                    var tmp = document.getElementById('files');
                    var tmpBody = tmp.contentWindow.document.documentElement;
                    var lis = tmpBody.getElementsByTagName('LI');
                    alert(lis.length);
                    for(var i = 0; i < lis.length; i++) {
                        if(lis[i].firstChild.nodeName == 'A')
                            alert(lis[i].firstChild.href);
                    }
                }
            </script>
        </head>
        <body>
            
            <iframe id="files" onload="getFiles(this)" src="iframecontent.html"></iframe>
    
        </body>
    </html>
    index test page:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
    <HTML>
     <HEAD>
      <TITLE>Index of /files</TITLE>
     </HEAD>
     <BODY>
    <H1>Index of /files</H1>
    <UL><LI><A HREF="/"> Parent Directory</A>
    <LI><A HREF="filename1.jpg"> filename1.jpg</A>
    
    <LI><A HREF="filename2.jpg"> filename2.jpg</A>
    </UL><ADDRESS>Apache/1.3.37 Server at www.server.com Port 80</ADDRESS>
    </BODY></HTML>



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •