Web Analytics Made Easy -
StatCounter Photo/Text rotator - CodingForum


No announcement yet.

Photo/Text rotator

  • Filter
  • Time
  • Show
Clear All
new posts

  • Photo/Text rotator

    I'm working on a javascript photo and text rotator. On lesser versions of firefox (< 1.0.7 for sure), there is some significant photo flicker when the fade starts and when the fade ends. I've tried everything I know to do to get it to stop. Anyone got any ideas?

    My script:
    		home_imgs = new Array();
    		maxPhotos = 3;
    		home_imgs[0] = new Image();
    		home_imgs[0].src = "/ftpimages/16/photo/image1.jpg"	
    		home_imgs[1] = new Image();
    		home_imgs[1].src = "/ftpimages/16/photo/image2.jpg"	
    		home_imgs[2] = new Image();
    		home_imgs[2].src = "/ftpimages/16/photo/image3.jpg"
    		photoChangeRate = 2;
    		textChangeRate = photoChangeRate*2;
    		fadeSpeed = 5;
    		timeoutRate = 5000;
    		photoOpacity = 100;
    		textOpacity = 100;
    		photoNum = 0;
    		textNum = 0;
    		textFadeOut = true;
    		maxTexts = 3;
    		/*Photo and News simultanious rotation*/
    		function startFading(){
    			fe_getobj("ne_"+textNum).style.display = "";
    			setTimeout("fadeItems()", timeoutRate);
    		function changeOpacity(obj, opacity){
    			var obj = new fe_getobj(obj);
    			obj.style.opacity = (opacity / 100); 
    			obj.style.MozOpacity = (opacity / 100); 
    			obj.style.KhtmlOpacity = (opacity / 100); 
    			obj.style.filter = "alpha(opacity=" + opacity + ")"; 
    		function fadeItems(){
    			/*photo rotation*/
    			if(photoOpacity > 0){
    				photoOpacity -= photoChangeRate;
    				changeOpacity("img_rotator", photoOpacity);
    			}else if(photoOpacity <= 0) {
    				nextPhoto = ++photoNum%maxPhotos;
    				fe_getobj("img_rotator").src = home_imgs[nextPhoto].src;
    				photoOpacity = 100;
    				changeOpacity("img_rotator", photoOpacity);
    				nextPhoto = ++nextPhoto%maxPhotos;
    				fe_getobj("img_background").style.background = "url("+ home_imgs[nextPhoto].src +") no-repeat";
    			/*text rotation*/
    			if(textOpacity > 0){
    					textOpacity -= textChangeRate;
    					textOpacity += textChangeRate;
    				changeOpacity("ne_"+textNum, textOpacity);
    			}else if(textOpacity <= 0){
    				textOpacity += textChangeRate;
    				fe_getobj("ne_"+textNum).style.display = "none";
    				textNum = ++textNum%maxTexts;
    				fe_getobj("ne_"+textNum).style.display = "";
    				textFadeOut = false;
    				changeOpacity("ne_"+textNum, textOpacity);
    			//debug("text: " + textOpacity + "; photo: " + photoOpacity);
    			if(textOpacity >= 100 && photoOpacity >= 100){
    				textFadeOut = true;
    				setTimeout("fadeItems()", timeoutRate);
    				setTimeout("fadeItems()", fadeSpeed);
    The HTML
    <body onload="startFading();">
    <div name="img_background" id="img_background" style="background: url(/ftpimages/16/photo/photo2.jpg)" ><img name="img_rotator" id="img_rotator" src="/ftpimages/16/photo/photo1.jpg" height="304" width="583"></div>
    <div name="ne_0" id="ne_0" style="display: none"> 
    	Quote 1 goes here<p></p>
    <div name="ne_1" id="ne_1" style="display: none"> 
    	Quote 2 goes here<p></p>
    <div name="ne_2" id="ne_2" style="display: none"> 
    	Quote 3 goes here<p></p>
    Just to cover myself, I extracted the code from a working version of the script. If theres a syntax error that prevents it from running, it happened when I coppied it, and I most likely don't need to know about it.

    What I'm looking for is logic errors that would account for the next photo in the rotation flickering in when the current photo fades in and out.


  • #2
    I know you don't want to hear about flaws due to copy and paste, but I'd like to get a working copy going in order to debug...

    You left out the bit of code that defines the "fe_getobj" function.

    post a working sample, or a link to a working sample in order for us to better help you.


    • #3
      it's just a simple

      function fe_getobj(obj) {
      	if (document.getElementById)
      		return document.getElementById(obj)
      	else if (document.all)
      		return document.all[obj]
      object retreval function.

      I've attached an html file with a working version.
      Attached Files


      • #4
        I think I've figured out what's going on... there at least appears to be some kinda bug in FF < 1.0.7 that causes elements to blink when they reach or leave 100% opacity. I changed my values to 99 for the photos and it seems to work alright. Text still blinks some, but I'll probably get it figured out.



        • #5
          Got it working with my own images (800w x 600h) with no flicker.

          Sounds like a video rendering bug to me. (the view might be updating while the CRT scan line is in the middle of the screen == tearing ).

          Try reducing the number of cycles and increasing the delay.
          Also test on a variety of machines.

          My specs:
          2.2ghz Intel Centrino Core Duo.
          Intell Graphics Media Accelerator 955 with shared ram (64 to 256mb).
          17" WXGA LCD screen (toshiba laptop).

          I can test on a variety of machines / displays once I get home if you're still having problems.