Nov 21, 2009

Onload Image Fades Without Flash - Inspired by the Flash-like effect

free web hosting
Open Discussion > MODERATED AREA > Computers > Programming Languages > Java, Java Servlets, Java Script, & JSP

Onload Image Fades Without Flash - Inspired by the Flash-like effect

themanilamen
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.


Comment/Reply (w/o sign-up)

truefusion
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.
CODE
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");
}
}
);
}
HTML
<a id="rotate" style="border: 0;"></a>

 

 

 


Comment/Reply (w/o sign-up)



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

This textarea will convert to Rich-Text automatically (IE, Firefox, Chrome)

Similar Topics

Keywords :

  1. Flash And Javascript Interaction
    swfobject js questions (1)
  2. Image Rotater
    need help (2)
    a while back i made this script and it worked great. i made it so that members off of some of
    mysites could use it to display the button images that i had that would link back to my site. and
    what a lot of the members were doing was using it with the marquee tag because they were linking to
    a lot of sites, and one of my members said that it would not work with the marquee tag in firefox.
    so i tested it and sure enough it would not work it would just site there. so i tryed to fix it but
    i could not find what was wrong with it, so i was hopeing that some one here could. h....
  3. Text Image Java Problem
    How to include text and image in some scrollable container? (1)
    Hello everyone, I am just writing some kind of text editor as practice for some school project and I
    have come to certain point where I can not solve certain problem. I wanted to make it available
    for people to insert images but I cannot figure how to combine images and text and which container
    should I use. I am working in Java and using swing. Also I would like to say that this content
    should be scrollable. So if anyone knows something about this and could be able to help me thanks in
    advance. Everyone opinion is accepted.....
  4. How To Make This Type Of Link?
    Image change on mouseover (1)
    I cant figure out how to solve this problem.... I want to make link to be like this: When the page
    is loaded to have a pictures on it, but one picture is a link. I want to make this picture to change
    when I get my mouse cursor over her... I mean: when my mouse cursor is not on a picture then on page
    is loaded a "pic1.gif" file, but when my mouse cursor is over it, picture changes to a "pic2.gif".
    Thanks for help!....
  5. Expanding Image Gallery
    Images Expanding on a mousover (6)
    I was looking through wired today, and i noticed :
    http://www.hotwired.com/webmonkey/06/08/index2a.html looks like a pretty nifty image gallery
    effect, though i noticed that it wont display properly in FireFox. Does anyone have any links or
    examples of other image gallery code, i find it pretty fascinating.....
  6. Countdown Code Help
    I need help setting an image as the background. (3)
    Ok, now for scripts like this i am not to well of working with..and i am in need of a bit of help, i
    would like to set a background image as the background not a color... CODE /* Dynamic
    countdown Script- © Dynamic Drive (www.dynamicdrive.com) For full source code, 100's more DHTML
    scripts, and TOS, visit http://www.dynamicdrive.com */ function
    setcountdown(theyear,themonth,theday){ yr=theyear;mo=themonth;da=theday } //////////CONFIGURE THE
    COUNTDOWN SCRIPT HERE////////////////// //STEP 1: Configure the countdown-to date, in the format
    year, month, day: se....
  7. Button To Display An Image
    (1)
    I have an assignment that is due tomorrow that I am struggling with. I want to be able to click the
    next button in this applet, and then repaint all the graphics. Board contains an array with all of
    the chess pieces on a board, and when the button is clicked I want to be able to get the next move,
    but for now I just wanted to call a function to move one piece just so I know it's working. Here
    is my applet code, I could post all the other files, but I am almost positive they all work
    correctly, and I am just having trouble with the applet. Code: CODE import java....
  8. Problem To Update Jlabel With A Different Image..
    (2)
    Hi All, I am inplementing a preview function on a image file browser. The application displays a
    list of image file names, which the user can select (one at a time). The preview image is loaded
    into a JLabel. When an image file name is selected, the application creates a thumbnail image on the
    hard drive call "preview.jpg". The JLabel should then update itself with the newly created thumbnail
    "preview.jpg". For some reason I cannot get the Image in the JLabel to update. I have confirmed
    that "preview.jpg" is being rewritten, each time a new image file is selected from ....
  9. Image Clocks
    (2)
    Does anyone know how to make you r own image clock (like a skin) for your website. The time displays
    like your system. you might take a look a this to know what i mean. So-You.net click here to see
    what i mean ...image clocks ....
  10. Image Show With Thumbnail And Fade
    Does anyone know were I can get this code? (2)
    Hi I would like to know if anyone knows a javascript that makes an thumbnail 'slideshow'
    and when mouseover...it fades...and when you click...it enlarges!!! I saw it somewhere here on the
    net but i cant finf it anymore!!! Can anyone help me...or does anyone know a good javascript
    site???? THANKS ....
  11. Resize Image Before Uploading
    (0)
    Hi, My upload and resizing scripts are working perfectly. Problem is clients are uploading large
    files and the script times out or connection timeout. Problem is with the bandwith and the slow
    connection in South Africa. I have increased the script timeout but it simply takes too long to
    upload. Clients forget that most didgital cameras files are massive and if they simple resize
    before uploading it will save them a huge amount of time. The final file is only 280 X 210 pixels.
    Uploading a 5Mb file over a 56k connection takes a month of Sundays. I have detailed instr....
  12. Onclick Image ->> Add Text To Input(text)field?
    (9)
    when some images get clicked, a text should added to an input(textfield). Does someone know how this
    can be done? I suppose it can be done via javascript. thanks in advance! /cool.gif' border='0'
    style='vertical-align:middle' alt='cool.gif' /> If you need more information, just ask
    /tongue.gif' border='0' style='vertical-align:middle' alt='tongue.gif' /> ....
  13. Rollover Background-image Button Ie
    Rollover background-image button IE (0)
    I find This Code On Search I Think for webmasters is good To Find Easy this Kind of code so i Type
    it here I Hope U enjoy it /blink.gif' border='0' style='vertical-align:middle' alt='blink.gif' />
    Step 1: Insert the below into the section of your page. Change the image path within ".initial"
    to reference the image you want applied initially to the button. .initial{ font-weight:bold;
    background-image:url(first.jpg); } CODE //Specify optional button target: "_new" for new
    window, or name of FRAME target (ie "myframe") var buttontarget="" if (docume....
  14. Image Scroller?
    (6)
    does anybody know where i can find a image scroller script? scrolling up and down?....

    1. Looking for Onload, Image, Fades, Without, Flash

Searching Video's for Onload, Image, Fades, Without, Flash
See Also,
advertisement


Onload Image Fades Without Flash - Inspired by the Flash-like effect

Affordable Web Hosting, Low cost Web Hosting - ComputingHost.com