call me a n00b, but how do you loop through a directory (js)

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

call me a n00b, but how do you loop through a directory (js)

Post by Luke »

I'm trying to set up a "random image" script for the front page of a website. I want to give a function a directory and have it look through the files in the directory and grab one at random. Is that possible? I'm so lame with javascript! :(

I can't decide whether or not that is possible.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

JavaScript cannot access the filesystem. Why not do it with PHP on the backend?
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

meh, I think I'll just provide an array. I won't be changing the images much. I have decided to have the images rotate at like 3 second intervals. The problem... the image src is changed before the image is loaded, causing a flicker. Any advice?

Please excuse my archaic javascript techniques. I have no idea what I'm doing :( Also, this uses jquery.

Code: Select all

      var i = 0;

      var images = ['image1.jpg','image2.jpg','image3.jpg','image4.jpg','image5.jpg','image6.jpg'];

      var imagePath = 'images/layout/home_page_rotation/';

      function getNextImage()
      {

        i = (i >= 5) ? 0 : i+1;

        return imagePath + images[i];

      }

      function switchImage()
      {

        $('#main_photo')
        .css('width', $('#main_photo .rotate').width())
        .css('height', $('#main_photo .rotate').height())
        .fadeOut('slow', function(){ //callback after fadeout

             $('#main_photo .rotate').attr('src', getNextImage());

             $(this).fadeIn('slow');

        });

      }

      $(function(){

        // I tried preloading them here, no luck! :(
        for (var a in images)
        {

          var img = new Image();
          img.src = imagePath + images[a];

        }

        setInterval ("switchImage()", 3000);

      });

User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

also, it would be WAY cool if I could have one fade in while the other fades out. How could I go about that%AC
User avatar
guitarlvr
Forum Contributor
Posts: 245
Joined: Wed Mar 21, 2007 10:35 pm

Post by guitarlvr »

could you create a flash application that chooses random images and does the fade in/fade out?

Wayne
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

I guess I could. I'd rather figure this out though.
User avatar
guitarlvr
Forum Contributor
Posts: 245
Joined: Wed Mar 21, 2007 10:35 pm

Post by guitarlvr »

Check this out. Is that what your looking for? (at least for fade in/out).

Wayne
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

thank you, that is what I want, but I'm using jquery for it. You can see the results here: http://store.tarmadesigns.com

See the flicker? That's the issue I am having. Has nothing to do with the fadein method. I just need to know how to get the images loaded before the src of the image is changed and it fades back in.
User avatar
guitarlvr
Forum Contributor
Posts: 245
Joined: Wed Mar 21, 2007 10:35 pm

Post by guitarlvr »

After the images have been loaded the first time through, the next time the flicker disappears. Above where you commented out the pre-load, you have:

Code: Select all

$(function(){
Is that open paren supposed to be there between the dollar sign and function?

Wayne
User avatar
guitarlvr
Forum Contributor
Posts: 245
Joined: Wed Mar 21, 2007 10:35 pm

Post by guitarlvr »

This might work. try something like this for image pre-load.

Wayne
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

The easiest way to preload an image is to

Code: Select all

var newimg = new Image();
newimg.src = 'source.jpg';
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

I tried:
my first post wrote:

Code: Select all

        // I tried preloading them here, no luck! :(
        for (var a in images)
        {

          var img = new Image();
          img.src = imagePath + images[a];

        } 
that didn't work. how come?

EDIT: Neither did this:

Code: Select all

      var i = 0;

      var images = ['image1.jpg','image2.jpg','image3.jpg','image4.jpg','image5.jpg','image6.jpg'];

      var imagePath = 'images/layout/home_page_rotation/';

      function getNextImage()
      {

        i = (i >= 5) ? 0 : i+1;

        return imagePath + images[i];

      }

      function switchImage()
      {

        $('#main_photo')
        .css('width', $('#main_photo .rotate').width())
        .css('height', $('#main_photo .rotate').height())
        .fadeOut('slow', function(){ //callback after fadeout

             var nextImage = getNextImage();
             var img = new Image();
             img.src = nextImage;

             $('#main_photo .rotate').attr('src', img.src);

             $(this).fadeIn('slow');

        });

      }

      $(function(){

        setInterval ("switchImage()", 3000);

      });
Post Reply