10 Jan, 2008
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 .= '
-
< ?= $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
Similar Posts:
- jQuery Image Gallery with Transitions and Navigation
- jQuery Loading – Display Images or Text Until Script is Finished
- PHP File Last Modified and Filesize (bytes to KB/MB)
- Find Time Between Two Dates in PHP
- Quick PHP Function to Get File Sizes in KB, MB & GB
No related posts.
January 11th, 2008 @ 9:14 am
Hi,
Why not using $image_time in the Javascript part?
djot
April 4th, 2008 @ 11:09 am
Thanks for pointing that out. It’s all fixed now.
June 7th, 2008 @ 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
June 7th, 2008 @ 3:06 pm
noob / skimmer alert.
I just saw the link to the file.
Thanks,
Uwem
August 20th, 2008 @ 3:17 am
any idea in how to add a rotating text along with the pics?
August 20th, 2008 @ 9:09 am
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.
August 20th, 2008 @ 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.
August 20th, 2008 @ 11:23 am
Never mind… I got it working.. tks love the script!
August 20th, 2008 @ 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.
August 25th, 2008 @ 7:40 pm
Yes, that’s very possible. I’ll look into creating another article for something like that.
Thanks for the request.
August 29th, 2008 @ 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!
February 21st, 2010 @ 3:38 am
its always easier to disable that code then to write it, as long as its only one or two things you dont like.
I like having alot of options, but for my task at hand simplicity worked. Thanks for the simplicity John!
October 19th, 2008 @ 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.
October 31st, 2008 @ 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
October 31st, 2008 @ 9:36 am
Yes, it is possible. Just use the
noscripttag below the closingscripttag. 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
October 31st, 2008 @ 9:02 pm
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
November 3rd, 2008 @ 10:40 am
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.
December 18th, 2008 @ 6:40 am
The innerfade.js is massive! I have seen this done in a fraction of the code.
December 18th, 2008 @ 9:10 am
Would you please provide a link to what you are referring to? I’m sure other people would benefit from less code.
July 28th, 2009 @ 4:47 pm
I found this:
http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html
March 9th, 2009 @ 8:31 pm
I tried this out and it works but initially it shows all the images for about half a second and then it only shows the first one.
March 10th, 2009 @ 11:52 am
Just change:
< ul id="image_rotate" style="list-style-type: none; list-style-image: none; list-style-position: outside;" >
To:
< ul id="image_rotate" style="list-style-type: none; list-style-image: none; list-style-position: outside; display: none;" >
And then add the following just below the $(document).ready(function() {
$(“image_rotate”).show();
So basically you’re using the inline style to hide the unordered list and then using jQuery to show it again. But once you show it through jQuery all the images will have been loaded and you should not see them all for that split second.
March 19th, 2009 @ 1:10 pm
Yeah
I’m having the same problem, you see all images for a split second when the page loads.
How do I get around this?
Thanks
March 20th, 2009 @ 3:50 am
Thanks for the script very neat, I am having issues with layout tho, I cant seem to have it centered in my div tag and fade in on itself, it fades the image below it then replaces the image at the top, if i have it straight as you have in ie it right aligns and in ff it left aligns but fades in on itself, I cant seem to get the right combination to display the image centered and on top of itsel to fade in, your help would be apreciated
March 20th, 2009 @ 8:38 am
You may want to try adding some inline styles to the div – try text-align: center; and vertical-align: middle;
March 20th, 2009 @ 3:52 am
I am having alignment issues, for some reason it loads at the bottom of the screen then replaces the top image
March 20th, 2009 @ 10:17 pm
Hi John thnks for the quick response, the issue seems to be with the css position in the jquery innerfade script, one relatively plavced then the element one set to absolute. using alignment on the tags doesnt work at all until I start changing the position tages then it centres put the next image that loads, loads below the current image then replaces, I will set again so you can see what I mean.
March 21st, 2009 @ 3:57 am
I made the container box wider and now it opens the new image next to the old image then replaces the old image after loading, but if i set it
$(this).css(‘position’, ‘relative’); and
$(elements[i]).css(‘z-index’, String(elements.length-i)).css(‘position’, ‘absolute’);
in firefox the transition works fine but is left aligned, the alignments are ignored, in internet explorer the transition works fine but is right aligned and alignments are ignored.
I have mine setup in div tags not in list tags, but that appeared to make no difference either way regarding the alignment.
I have added a class for image_rotate in my style sheet and applied the style tags you suggested but this appears to make no difference, I have also set the alignment on the div tag itself to center, but unless both css elements are set to relative this apears to be ignored.
if i set both to relative, the content centers but then I have the issue of the new image appearing next to the old image and then replacing, I am not that good with javascript to see how to fix this. Above references from your jquery.innerfade.js file which is a copy I grabbed from your site here.
March 21st, 2009 @ 9:01 am
Can you send me a link to the page you’re working on?
March 21st, 2009 @ 12:37 pm
Lovely, lovely. Just what I have been looking for!
Weird stuff though. Just about to redesign the entire site, but it’s doing something weird in IE.
http://www.photochris.co.uk/test2.php
Chrome and Firefox are fine. Any ideas?
March 21st, 2009 @ 9:34 pm
you have the same problem I am having, John is very helpful we should be able to resolve this issue soon
July 2nd, 2009 @ 10:35 pm
Thanx a lot, was searching for something like this!
Youre the man!
July 8th, 2009 @ 4:49 am
Hi
Why can i not absolutely position an element over the top of the fader? Say i have
The banner classed div’s rotate but the absolute block will only show above the last element
July 8th, 2009 @ 10:54 am
Please contact me via the contact form. Your code appears to have been cut off.
August 10th, 2009 @ 2:28 pm
Hi ,
This is exactly what i was looking for! However, I have need of the images appearing in sequential order and somehow it’s not working for me. I made sure the variable in the “jquery.innerfade.js” file is set to “sequential”. I can’t figure out what dictates the sequential order and why I’m getting wacky results. For example, I named my images “0.jpg”, “1.jpg”…and so on, but it always pulls in “4.jpg” first, then 6, 3, 5, 1, 0, and 2…i that order (7 images).
Is there anything I can add to the script that will have it pull in alphanumeric order? Or is there something I’m doing wrong?
Thanks!
August 11th, 2009 @ 8:19 am
It’s probably reading the files based on the time they were uploaded or by the date they were created. Try uploading file “0.jpg” first and then “1.jpg” next.
If that does not work, you may want to modify the code to read the directory for image files and add them to an array. sort() the array and then loop over it to add the image files to the unordered (ul) list.
If you have any questions or need any more help, please use the contact form.
August 18th, 2009 @ 7:35 pm
Is there a way to add a clickable link to the images. have tried several ways but they do not seem to respond to the clicks. Also is there any way to position several of the rotaters on the same page at different locations on the page. To be specific I have 10 specific locations ontop of an image that I am using as a background. Is this possible with this script ?
August 19th, 2009 @ 9:40 am
Yes, you can make the image clickable. You would need to set the images either in an array (rather than from a directory) or have some kind of checking. (if($image == ‘1.jpg’){$link = ‘/main.php’;} or something similar.
I’m not sure what you’re asking on the second question. Please use the contact form.
August 20th, 2009 @ 8:30 am
how to add some navigation like prev/next & play/pause ?
October 3rd, 2009 @ 11:09 am
I want to center it but it will not work is there a simple solution?
October 12th, 2009 @ 9:38 pm
You may want to try to add some additional styles to the list. If that does not work, you may want to use DIVs instead of the lists.
November 19th, 2009 @ 7:50 pm
Hi there,
Is there a way to control the speed of the fade?
To let the transition go slower?
Tnx so much.
Greetings Simon
November 20th, 2009 @ 11:51 am
Yes, just change the “speed” variable to a number. The number will be in milliseconds.
speed: 2000,
FYI: 1000 milliseconds = 1 second
November 27th, 2009 @ 10:42 am
hi, i have 10 pictures which are fading from 1 to picture 10. so, how could i say, that it will stop by picture 10? anyone an idea?
thx rA
February 3rd, 2010 @ 4:18 am
hi. nice script.
is it possible to make a random image view funktion? now the images are: 1, 2, 3, 4 … but i want 4,3,4,1,3,1,2 and so on.. you know
February 21st, 2010 @ 3:45 am
uncomment the three lines in the js on whatever page your suing it for…
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );