Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    47
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Read from a directory? Instead of individual file names...

    Excavator and Felgall helped me out earlier with some script and how to place inside the tags. It works great!

    This is a very simple script that does a simple slideshow without user interaction. Is it possible, instead of listing out each link (src=01.jpg, 02.jpg, etc). Can it be setup to simply just play each image in a particular directory?

    Code:
    <head>
    <title>Digital Displays</title>
    
    <style>
    body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}
    
    .fadein { position:relative; }
    .fadein img { position:absolute; left:0; top:0; }
    </style>
    
    <script src="RotatingImages/jquery.min.js"></script>
    <script>
    $(function(){
    	$('.fadein img:gt(0)').hide();
    	setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
    });
    </script>
    
    </head>
    <body>
    
    <div class="fadein">
    <img src="RotatingImages/01.jpg">
    <img src="RotatingImages/02.jpg">
    <img src="RotatingImages/03.jpg">
    <img src="RotatingImages/04.jpg">
    </div>
    
    </body>
    </html>
    So instead of
    <img src="RotatingImages/01.jpg">
    <img src="RotatingImages/02.jpg">
    etc

    something (i know this doesn't work but) <img src="Everything in this directory.jpg">
    Last edited by themoon; 01-14-2013 at 03:22 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,300
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    Quote Originally Posted by themoon View Post
    Excavator and Felgall helped me out earlier with some script and how to place inside the tags. It works great!

    This is a very simple script that does a simple slideshow without user interaction. Is it possible, instead of listing out each link (src=01.jpg, 02.jpg, etc). Can it be setup to simply just play each image in a particular directory?

    something (i know this doesn't work but) <img src="Everything in this directory.jpg">
    In a word, no. Javascript has no way to read the contents of (files within) a directory.


    Flies from London to open new Preston supermarket - Headline in Lancashire Chronicle

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    although if your files are named to a strict numerical order like this:

    Code:
    <img src="RotatingImages/01.jpg">
    <img src="RotatingImages/02.jpg">
    <img src="RotatingImages/03.jpg">
    <img src="RotatingImages/04.jpg">
    you could easily use an incrementing variable to cycle through them. Knowing when to stop is a little more of a calculation if you want it to be truly dynamic.

    But if those are just example filenames and your real names have no such order, it's like Philip said.

  • #4
    New Coder
    Join Date
    Dec 2012
    Location
    England
    Posts
    20
    Thanks
    0
    Thanked 4 Times in 4 Posts
    You can read entire folder with PHP and echo every image as <img> tag.

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    if your folder shows a directory listing, then javascript can easily grab the listing using ajax, parse the html links to the images, and feed the image list to your slideshow script.

    it very simple, so long as the server lists the files in your image folder. If not, then you'll need a naming convention or a chunk of server-side code.

    on many web hosting packages, like godaddy for example, this is an option in the site's control panel.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%


  •  

    Posting Permissions

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