Page 1 of 1

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

Posted: Thu May 10, 2007 1:41 pm
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.

Posted: Thu May 10, 2007 1:50 pm
by Chris Corbyn
JavaScript cannot access the filesystem. Why not do it with PHP on the backend?

Posted: Thu May 10, 2007 2:32 pm
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);

      });


Posted: Thu May 10, 2007 2:38 pm
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

Posted: Thu May 10, 2007 2:49 pm
by guitarlvr
could you create a flash application that chooses random images and does the fade in/fade out?

Wayne

Posted: Thu May 10, 2007 3:02 pm
by Luke
I guess I could. I'd rather figure this out though.

Posted: Thu May 10, 2007 3:07 pm
by guitarlvr
Check this out. Is that what your looking for? (at least for fade in/out).

Wayne

Posted: Thu May 10, 2007 3:13 pm
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.

Posted: Thu May 10, 2007 3:19 pm
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

Posted: Thu May 10, 2007 3:25 pm
by guitarlvr
This might work. try something like this for image pre-load.

Wayne

Posted: Thu May 10, 2007 3:27 pm
by nickvd
The easiest way to preload an image is to

Code: Select all

var newimg = new Image();
newimg.src = 'source.jpg';

Posted: Thu May 10, 2007 3:30 pm
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);

      });