Fade In and Out Images from a Single Directory Using jQuery (with plugin)

Jan

Fade In and Out Images from a Single Directory Using jQuery (with plugin)
Posted by john in javascript, php

A friend of mine recently requested a quick image rotator script that was not using Flash, but would use Javascript. Below is a script that will read through a single directory and look for any image file (jpg, gif, or png) and rotate it.

Requirements:

PHP
jQuery (latest version)
InnerFade plugin (see docs for variables explanations and additional vars)

// Global Variables
$image_dir = "$_SERVER[DOCUMENT_ROOT]/examples/imgs"; // directory on server
$image_relative_path = '/examples/imgs'; // path to images relative to script
$file_types = array('jpg','jpeg','gif','png');
$image_time = '4000'; // seconds each image will display (4000 = 4 seconds)

if($handle = opendir($image_dir)) {
	while (false !== ($file = readdir($handle))) {
	if ($file != "." && $file != "..") {
		$ext_bits = explode(".",$file); // finds file extensions
		foreach($ext_bits as $key => $value){
			if(in_array($value,$file_types)){
				$image_rotation .= '


';
			}
		}
	}
}
closedir($handle);
}







	< ?= $image_rotation; ?>

Live demo or source file rotating three images for single directory

If you have any questions about this, please leave a comment.

John

Posted in javascript, php |

16 Responses to “Fade In and Out Images from a Single Directory Using jQuery (with plugin)”

djot Says:
January 11th, 2008 at 9:14 am

-
Hi,

Why not using $image_time in the Javascript part?

djot
-

[Reply]

john reply on April 4th, 2008:

Thanks for pointing that out. It’s all fixed now.

[Reply]

uwem Says:
June 7th, 2008 at 3:04 pm

Hi,

For some reason the code is not complete in the browser. It’s only partially showing up. Can you send me the code/script?

Thanks,

Uwem

[Reply]

uwem Says:
June 7th, 2008 at 3:06 pm

noob / skimmer alert.

I just saw the link to the file.

Thanks,

Uwem

[Reply]

Laura Says:
August 20th, 2008 at 3:17 am

any idea in how to add a rotating text along with the pics?

[Reply]

john reply on August 20th, 2008:

I’m sure there’s a way to do it with jQuery. You may want to check their site http://www.jquery.com and see the documentation.

One option would be to just use an animated GIF as one of the images rotating.

[Reply]

Laura Says:
August 20th, 2008 at 11:00 am

Well I’m sorta interested in using actual text. that fades in and out with each pic.
krk.crucialidea.com
in the main page you will see a white box area in the rotating image, and I want to allow the user to each one of those rotating pics, and add a caption for each pic that will appear with each image.

[Reply]

Laura Says:
August 20th, 2008 at 11:23 am

Never mind… I got it working.. tks love the script!

[Reply]

William Says:
August 20th, 2008 at 1:26 pm

What about next and previous links? Would that be possible? and I think that would be a brilliant addon to this API. Thanks! anyway, Great Job with the API. Nicely done.

[Reply]

john reply on August 25th, 2008:

Yes, that’s very possible. I’ll look into creating another article for something like that.

Thanks for the request.

[Reply]

matthewstroh Says:
August 29th, 2008 at 11:20 am

A fantastic job, indeed. Actually, I am very pleased by the simplicity of this work and how it DOES NOT feature next and back buttons. So many of these image gallery libraries feature over-complicated or over-designed UI interactions that almost seem a bit too packaged. There is nothing wrong with that, though this is exactly what I was looking for. Simplicity. Thanks!

[Reply]

joe Says:
October 19th, 2008 at 10:59 pm

This is exactly what I was searching for. I am putting together a memorial web site for a friend who passed away from breast cancer (only 24 years old) and none of the many flash galleries I saw had this simple elegant style, just a fading slideshow that could accomodate various image sizes. I actually wrote my own a few months ago using php and xajax, but this has the fade feature that I really wanted. Thanks for this.

[Reply]

OSU Says:
October 31st, 2008 at 6:40 am

Hi,

This is great, thank you for sharing. However (!), when Javascript is disabled (which is becoming more common everyday), is there not a way to hide images other than the top one?

In other words, when I switch off Javascript all the images appear as opposed to just one.

Thanks

[Reply]

john reply on October 31st, 2008:

Yes, it is possible. Just use the noscript tag below the closing script tag. You will need to change the way the script is written above, but I believe it is possible.

More info on the noscript tag: http://www.w3schools.com/TAGS/tag_noscript.asp

[Reply]

OSU reply on October 31st, 2008:

Thanks for getting back to me John. I’ll check that out.

For some reason, I’m having a problem getting this to work - I think it’s to do with the innerfade plugin and the URL of my images folder relative to the script because I’ve tried a few functions with JQuery and it seems to be working ok.

I’m getting the following errors in Firebug:

1) jQuery is not defined })(jQuery); jquery-innerfade…. (line 99)

2) $(”#image_rotate”).innerfade is not a function
(no name)()
to the wait list jQuery.readyList.push()
(no name)()
each([function()], function(), undefined)
ready()
$(’#image_rotate’).innerfade({

I’ve included both javascript files in the head of my document and this is what I have for my php directory urls:

// Global Variables
$image_dir = ‘/templates/name/js/images’; // directory on server
$image_relative_path = ‘/templates/name/js/images’; // path to images relative to script

When you say ‘path to images relative to script’, I assume you’re talking about the script that holds the above code and not relative to where your jquery and innerfade js files are right?

I can’t seem to get the images to load.

Any ideas?

Thanks

[Reply]

john reply on November 3rd, 2008:

Try changing:
$image_dir = ‘/templates/name/js/images’;
to
$image_dir = “$_SERVER[DOCUMENT_ROOT]/templates/name/js/images”;

If this does not change anything, can you send me the link to the page you’re working on? I’ll take a look at it.

16 Responses to “Fade In and Out Images from a Single Directory Using jQuery (with plugin)”

Leave a Reply