Welcome Guest!

If you do not have an account yet on The Web Squeeze forums, please Register! It’s FREE and there are many benefits:

  • Receive Fast Advice
  • Learn Programming Languages
  • Get Professional Website Reviews
  • Quick Troubleshooting Assistance

> Rotating Image Fader

This is a discussion on Rotating Image Fader, within the Javascript section. This forum and the thread "Rotating Image Fader" are both part of the Programming Your Website category.

2 Pages V   1 2 >  
 Reply to this topicStart new topic
> Rotating Image Fader
Vanessa
post Mar 20 2008, 06:59 AM
Post #1


Rapid Squeezer
****

Group: Members
Posts: 191
Joined: 14-February 08
From: England
Member No.: 108
I have a rotating image thing on a site I'm doing using this code:
CODE
var bannerImg = new Array();
  bannerImg[0]="images3/mainphoto.jpg";
  bannerImg[1]="images3/mainphoto2.jpg";
  bannerImg[2]="images3/mainphoto3.jpg";
  bannerImg[3]="images3/mainphoto4.jpg";
  bannerImg[4]="images3/mainphoto5.jpg";

var newBanner = 0;
var totalBan = bannerImg.length;

function cycleBan() {
  newBanner++;
  if (newBanner == totalBan) {
    newBanner = 0;
  }
  document.banner.src=bannerImg[newBanner];
  setTimeout("cycleBan()", 5*1000);
}
window.onload=cycleBan;

It works fine, but I want the pictures to fade in and out rather than just jumping from one to the next and I'm wondering if there's something simple I can just add to the code I've already got to make that happen? I've tried Googling but I can only find code for the whole thing including the rotating bit, which would be ok except they're rather more complicated than what I've already got and I'm a bit lost with them. I'm hoping someone can just give me a magic piece of extra code that I can easily add in to what I've already got.


--------------------
Vanessa

There are 10 types of people in the world - those that understand binary and those that don't.
Go to the top of the page
 
+Quote Post
Rakuli
post Mar 20 2008, 09:22 AM
Post #2


Squeeze Machine
*****

Group: Administrators
Posts: 649
Joined: 13-February 08
From: Catching the squeezed drips downunder.
Member No.: 13
Okay, this should be able to help you out -- I am using a quick script I found here http://brainerror.net/scripts/javascript/blendtrans/ and modded it slightly

CODE
var changenow = false;

function opacity(id, opacStart, opacEnd, millisec) {
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;

    //determine the direction for the blending, if start and end are the same nothing happens
    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++)
            {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }  else {
         changeNow = true;
     }
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}


Add that code above yours and change yours to the following

CODE
var bannerImg = new Array();
  bannerImg[0]="images3/mainphoto.jpg";
  bannerImg[1]="images3/mainphoto2.jpg";
  bannerImg[2]="images3/mainphoto3.jpg";
  bannerImg[3]="images3/mainphoto4.jpg";
  bannerImg[4]="images3/mainphoto5.jpg";

var newBanner = 0;
var totalBan = bannerImg.length;

function cycleBan() {
  newBanner++;
  if (newBanner == totalBan) {
    newBanner = 0;
  }

   changeNow = false; // Reset this so we don't go fading like crazy
   // start the fade out
   opacity('banner', 100, 30, 1000)

  // wait for it!! wait !!
  while (!changeNow) { continue; }

  //  change the image now :)
    document.banner.src=bannerImg[newBanner];

  // now fade back it
  opacity('banner',30, 100, 1000)

  // Set the image to cycle
  setTimeout("cycleBan()", 5*1000);
}
window.onload=cycleBan;



Hope that helps


--------------------
Luke Dingle . com

Turn Over a Playful Leaf on Web Design -- read about the javascript cat
Go to the top of the page
 
+Quote Post
Vanessa
post Mar 20 2008, 10:53 AM
Post #3


Rapid Squeezer
****

Group: Members
Posts: 191
Joined: 14-February 08
From: England
Member No.: 108
Thanks for looking at this for me Rakuli, unfortunately something's not working with it though. It's just staying stuck on the first image and after a few seconds I get an error message saying 'Warning: Unresponsive script'.


--------------------
Vanessa

There are 10 types of people in the world - those that understand binary and those that don't.
Go to the top of the page
 
+Quote Post
Rakuli
post Mar 20 2008, 11:00 AM
Post #4


Squeeze Machine
*****

Group: Administrators
Posts: 649
Joined: 13-February 08
From: Catching the squeezed drips downunder.
Member No.: 13
Woops smile.gif Gave you an infinite loop -- lol

In the first snippet, change

var changenow to
var changeNow = false;

Variables are case sensitive smile.gif

And just noticed a little flaw in the code <-- I shouldn't try help when I'm tired


Sorry Vanessa -- I should have tested instead of assuming there was nothing wrong wink.gif


Here is the code in its working form

CODE
function opacity(id, opacStart, opacEnd, millisec) {
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;

    //determine the direction for the blending, if start and end are the same nothing happens
    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "', " + (i == opacEnd ? "true" : "false") + ")",(timer * speed));
            timer++;
        }
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++)
            {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }  
}

//change the opacity for different browsers
function changeOpac(opacity, id, chg) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
    chg ? cycleBan() : false;
}

var bannerImg = new Array();
  bannerImg[0]="images3/mainphoto.jpg";
  bannerImg[1]="images3/mainphoto2.jpg";
  bannerImg[2]="images3/mainphoto3.jpg";
  bannerImg[3]="images3/mainphoto4.jpg";
  bannerImg[4]="images3/mainphoto5.jpg";

var newBanner = 0;
var totalBan = bannerImg.length;
function startCycle()
{
    opacity('banner',100,10, 1000);
}
function cycleBan() {
  newBanner++;
  if (newBanner == totalBan) {
    newBanner = 0;
  }

  

  //  change the image now :)
    document.banner.src=bannerImg[newBanner];

  // now fade back it
opacity('banner',10, 100, 1000)

  // Set the image to cycle
  setTimeout("startCycle()", 5*1000);
}
window.onload=cycleBan;


--------------------
Luke Dingle . com

Turn Over a Playful Leaf on Web Design -- read about the javascript cat
Go to the top of the page
 
+Quote Post
Vanessa
post Mar 20 2008, 11:46 AM
Post #5


Rapid Squeezer
****

Group: Members
Posts: 191
Joined: 14-February 08
From: England
Member No.: 108
Sorry to be a pain, but it's still not working girl_impossible.gif it's just staying stuck on the first image.

Maybe I'm doing something wrong? Just to clarify, the latest code block that you posted is the complete code yes? I replaced the whole JS code I had with that.


--------------------
Vanessa

There are 10 types of people in the world - those that understand binary and those that don't.
Go to the top of the page
 
+Quote Post
Rakuli
post Mar 20 2008, 11:49 AM
Post #6


Squeeze Machine
*****

Group: Administrators
Posts: 649
Joined: 13-February 08
From: Catching the squeezed drips downunder.
Member No.: 13
Hmm, that last code is working for me...

Do you have an id="banner" on your image? It requires that...


--------------------
Luke Dingle . com

Turn Over a Playful Leaf on Web Design -- read about the javascript cat
Go to the top of the page
 
+Quote Post
Vanessa
post Mar 20 2008, 11:55 AM
Post #7


Rapid Squeezer
****

Group: Members
Posts: 191
Joined: 14-February 08
From: England
Member No.: 108
QUOTE (Rakuli @ Mar 20 2008, 04:49 PM) *
Do you have an id="banner" on your image? It requires that...

I had name="banner" which worked fine when I wasn't doing the fading, but I just tried changing it to id="banner" and it's still not working for me. It obviously must be something I'm doing or not doing if it works for you!


--------------------
Vanessa

There are 10 types of people in the world - those that understand binary and those that don't.
Go to the top of the page
 
+Quote Post
Rakuli
post Mar 20 2008, 12:03 PM
Post #8


Squeeze Machine
*****

Group: Administrators
Posts: 649
Joined: 13-February 08
From: Catching the squeezed drips downunder.
Member No.: 13
QUOTE
This script is like a slinkie - not really serving any useful purpose, but will bring a smile to my face when I push it down a flight of stairs...
biggrin.gif

I'm just trying to think what the problem could be, I did test on FF and IE... It's not a cache issue is it? If you are still getting the infinite loop problem it may still be the old script. Are there any errors appearing?


--------------------
Luke Dingle . com

Turn Over a Playful Leaf on Web Design -- read about the javascript cat
Go to the top of the page
 
+Quote Post
Vanessa
post Mar 20 2008, 12:03 PM
Post #9


Rapid Squeezer
****

Group: Members
Posts: 191
Joined: 14-February 08
From: England
Member No.: 108
Ok, it works now, hurrah! I just deleted what I had done, closed everything out, ran outside shouting "Why, why, oh why won't it work!!!", did a little dance, ate some chocolate, repasted the code, saved, reopened my browser and yay!

So thank you very much for your help and patience girl_smile.gif


--------------------
Vanessa

There are 10 types of people in the world - those that understand binary and those that don't.
Go to the top of the page
 
+Quote Post
Rakuli
post Mar 20 2008, 12:05 PM
Post #10


Squeeze Machine
*****

Group: Administrators
Posts: 649
Joined: 13-February 08
From: Catching the squeezed drips downunder.
Member No.: 13
** Grabs Vanessa's arm and dances in a little circle singing Bee Gee's songs from the late eighties **

Cool wink.gif Glad it works...


--------------------
Luke Dingle . com

Turn Over a Playful Leaf on Web Design -- read about the javascript cat
Go to the top of the page
 
+Quote Post
karinne
post Mar 20 2008, 12:09 PM
Post #11


Co-Founder
*******

Group: Co-Founders
Posts: 2,799
Joined: 13-February 08
From: Squeezin'
Member No.: 2
QUOTE (Vanessa @ Mar 20 2008, 01:03 PM) *
Ok, it works now, hurrah! I just deleted what I had done, closed everything out, ran outside shouting "Why, why, oh why won't it work!!!", did a little dance, ate some chocolate, repasted the code, saved, reopened my browser and yay!


Hmmm ... I'll have to remember this new technique when I have a problem with my .NET stuff on_the_quiet2.gif


--------------------
The Squeeze Store is now OPEN! Come on in and grab something!

a web design portfolio | web non-sense - REDESIGNED!
I'm also on: del.icio.us | flickr | virb | facebook | twitter
The Web Squeeze is also on: virb | facebook | stumbleupon - JOIN IN!
Go to the top of the page
 
+Quote Post
Vanessa
post Mar 20 2008, 12:32 PM
Post #12


Rapid Squeezer
****

Group: Members
Posts: 191
Joined: 14-February 08
From: England
Member No.: 108
QUOTE (karinne @ Mar 20 2008, 05:09 PM) *
Hmmm ... I'll have to remember this new technique when I have a problem with my .NET stuff on_the_quiet2.gif

Yes, I'm not sure which part of it it was that made it work, so best to follow the whole sequence to be sure. The chocolate was Smarties in case that makes a difference (you may have to substitute M&Ms if you don't have Smarties there).


--------------------
Vanessa

There are 10 types of people in the world - those that understand binary and those that don't.
Go to the top of the page
 
+Quote Post
jackfranklin
post Mar 25 2008, 03:55 PM
Post #13


Rapid Squeezer
****

Group: Members
Posts: 102
Joined: 16-February 08
Member No.: 163
Vanessa, would you mind if I used that script on a site I am working on?


--------------------
Jack Franklin | Eportfolio & Weblog
Go to the top of the page
 
+Quote Post
Vanessa
post Mar 25 2008, 05:16 PM
Post #14


Rapid Squeezer
****

Group: Members
Posts: 191
Joined: 14-February 08
From: England
Member No.: 108
QUOTE (jackfranklin @ Mar 25 2008, 08:55 PM) *
Vanessa, would you mind if I used that script on a site I am working on?

Well I'm not sure, Rakuli did do it just for me...(kidding!).

It's not my script at all, the original script I had came from a Google search I did, and the other bit Rakuli adapted from a site he knew, so it's there for anyone who wants to use it!


--------------------
Vanessa

There are 10 types of people in the world - those that understand binary and those that don't.
Go to the top of the page
 
+Quote Post
Vanessa
post Apr 21 2008, 04:12 AM
Post #15


Rapid Squeezer
****

Group: Members
Posts: 191
Joined: 14-February 08
From: England
Member No.: 108
Luke? Luke?! I need you again (or anyone else who has the answer!).

Going back to this old thread, the fading between images is a bit jerky, any ideas on how to get a smoother fade? Also, the rotating/fading doesn't seem to work at all on Internet Explorer, any thoughts on that?

I've uploaded it to a free server for now so that you can see:

http://www.worldtreemusic.freesitespace.net

(yes, I know I have other issues on this, and other pages, but I'm just tackling one thing at a time!).


--------------------
Vanessa

There are 10 types of people in the world - those that understand binary and those that don't.
Go to the top of the page
 
+Quote Post
Rakuli
post Apr 21 2008, 04:23 AM
Post #16


Squeeze Machine
*****

Group: Administrators
Posts: 649
Joined: 13-February 08
From: Catching the squeezed drips downunder.
Member No.: 13
You can try fixing the IE problem first by changing

CODE
    document.banner.src=bannerImg[newBanner];


to

CODE
    document.getElementById('banner').src=bannerImg[newBanner];


The former is a bit of legacy code, the latter being part of the DOM is better to use where possible.


--------------------
Luke Dingle . com

Turn Over a Playful Leaf on Web Design -- read about the javascript cat
Go to the top of the page
 
+Quote Post
Rakuli