Jan
10
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:

  1. PHP
  2. jQuery (latest version)
  3. 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

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

    djot Says:

    -
    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:

    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:

    noob / skimmer alert.

    I just saw the link to the file.

    Thanks,

    Uwem

    [Reply]

    Laura Says:

    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:

    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:

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

    [Reply]

    William Says:

    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:

    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:

    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:

    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.

    Leave a Reply