http://clagnut.com/sandbox/imagefades/
What I’d really like to be able to do is fade-transition through an array of images without user input. I don’t want/need to iterate through the array more than once, but all my attempts this afternoon failed badly. Any feedback / suggestions / pointers from more experienced javascript folks would be greatly welcomed.
| |
|
Welcome to KnowledgeSutra - Dear Guest | |
Page 1 of 1
Onload Image Fades Without Flash Inspired by the Flash-like effect
Page 1 of 1
Other Replies To This Topic
#2
Posted 02 March 2009 - 01:24 PM
Here's an old JavaScript script using JQuery i did. You may modify it to fit your needs. This script loops through the images infinitely, and doesn't attempt to preload the images before displaying. It doesn't do an overlap fade, where the next image fades on top of the previous image, but that can be fixed if you convert the anchor element into a block-level element and adjust its size to the current image, then upon fade place the image as the background of it and start fading in the next image, and repeat. I've only been modifying this script based on "necessity," so if you notice anything you don't like, you'll have to adjust it accordingly.
var index = 0;
var links = ["URL_for_first_image", "URL_for_second_image"];
var images = ["/path/to/first_image.jpg", "/path/to/second_image.jpg"];
$(document).ready(
function(){
banner_rotate();
}
);
function banner_rotate(){
if (!$('#image-rotate').length){
$('#rotate').attr("href", links[index]);
$('#rotate').append("<img id=\"image-rotate\" src=\""+images[index]+"\" alt=\"\"/>");
}
setTimeout(doBannerFade, 7000);
}
function doBannerFade(){
$('#image-rotate').fadeOut(1250, function()
{
index++;
if (index == images.length){
index = 0;
}
$('#image-rotate').attr("src", images[index]);
$('#image-rotate').fadeIn(1250, function()
{
banner_rotate();
}
);
if (links[index] != "#removeAttr"){
$('#rotate').attr("href", links[index]);
} else {
$('#rotate').removeAttr("href");
}
}
);
}<a id="rotate" style="border: 0;"></a>
Share this topic:
Page 1 of 1
Similar Topics
| Topic | Forum | Started By | Stats | Last Post Info | |
|---|---|---|---|---|---|
|
Make Image Change When Hovered W/o Flash?
How? |
your Secret HideOut |
PHPtech
|
|
|
|
Fishy (flash Game)
eat all the fish before they eat you |
Flash Animations |
snlildude87
|
|
|
|
Top Image Hosting!
This is my list of image hosters! |
Website Discussion |
bradley908
|
|
|
|
Free Image Hosting
|
Freebie Stuff |
sirfrancisdrake
|
|
|
|
Making Interactive Cds With Flash
My second flash tutorial for Beginners |
Tutorials |
lairz
|
|
|
|
Another Flash Site
you dont need sunglasses here |
Website Reviews |
puck
|
|
|
|
Image Rotater
need help |
Java, Java Servlets, Java Script, & JSP |
demonlord
|
|
|
|
Uploaded Picture On Background Image
LOOKING for script and/or advice |
PHP Programming |
AYANO
|
|
|
|
Flash Games Cms
Specially made for flash games... |
Web Design |
eXtreme
|
|
|
|
My Stupid Flash Intro
|
The Vent |
GuySpook
|
|
|
|
Photoshop Image Edits
These Are funny threads. |
General Talk |
DataHead
|
|
|
|
Toogle!
Text Image Search |
Misc |
chungster
|
|
|
|
Flash Templates And Themes
all about Flash and themes |
Web Design |
markian
|
|
|
|
How To Make Cool Rain Effect
(photoshop tut) |
Tutorials |
midnitesun
|
|
|
|
10.000's Of Free Swish/swishmax Stuff Like
Templates,sound loops/effects .......... |
Freebie Stuff |
Lyon2
|
|
|
|
Some Flash Menus
|
General Talk | Guest_Minisheep_* |
|
|
|
Flash Communication Server
where to begin? |
Computers |
epox
|
|
|
|
100's Of More Free Flash Components
Very good |
3D/Large Pieces |
Lyon
|
|
|
|
Turning An Image Into A Cartoon Style - Photoshop
Tutorial on cartooning images. |
Tutorials |
Benz1435
|
|
|
|
my usb flash is dead! is there any way to fix?
Formating Usb Flash Drive |
Computers |
iGuest
|
|

Help

Add Reply


MultiQuote
















