Banner Rotation delay time

Technical Details

Forum version : #phpBB3
Position : Founder
Concerned browser(s) : Google Chrome
Who the problem concerns : All members
Forum link : http://www.thinktankforum.net

Description of problem

Hello,

Okay so i want a banner rotation system to rotate some images i have. The rotation system works the same as the banner rotation which is this:

Code:

(function() {
          var BannerRotator = {
            images : [
              'http://i86.servimg.com/u/f86/18/96/91/93/117.png',
              'http://i86.servimg.com/u/f86/18/96/91/93/217.png',
              'http://i86.servimg.com/u/f86/18/96/91/93/314.png',
              'http://i86.servimg.com/u/f86/18/96/91/93/416.png',
              'http://i86.servimg.com/u/f86/18/96/91/93/515.png',
              'http://i86.servimg.com/u/f86/18/96/91/93/616.png',
              'http://i86.servimg.com/u/f86/18/96/91/93/713.png'
            ],
       
            start_delay : 5000,
            duration : 5000,
            height : 'auto',
       
            fade_image : true,
            fade_speed : 1200,
         
            keep_initial : true,
            remember_position : true,
            preload : true,
       
            // technical data below
            index : -1,
            logo : null,
         
            // increment the index and display the next image in rotation after a small delay
            next : function(ms) {
              if (ms === undefined) ms = FA.BannerRotator.duration;
       
              window.setTimeout(function() {
                if (++FA.BannerRotator.index >= FA.BannerRotator.images.length) FA.BannerRotator.index = 0; // reset index when it exceeds "images" length
                if (FA.BannerRotator.remember_position) my_setcookie('fa_banner_index', FA.BannerRotator.index); // remember the last banner shown
             
                // fade banner in and out
                if (FA.BannerRotator.fade_image) {
                  $(FA.BannerRotator.logo).fadeOut(FA.BannerRotator.fade_speed, function() {
                    FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index]; // set next banner
                    $(this).fadeIn(FA.BannerRotator.fade_speed, FA.BannerRotator.next); // fade it in
                  });
                }
       
                // default rotation
                else {
                  FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index];
                  FA.BannerRotator.next();
                }
              }, ms);
            },
         
            // initial start up to get the correct logo node and setup some other settings
            init : function() {
              var logo = document.getElementById('i_AffiliatesSys') || document.getElementById('ttAffImg') || document.getElementById('ttAffImg'),
                  index = my_getcookie('fa_banner_index');
               
              if (logo) {
                FA.BannerRotator.logo = logo.tagName == 'IMG' ? logo : logo.firstChild;
                FA.BannerRotator.logo.style.height = FA.BannerRotator.height;
             
                if (FA.BannerRotator.keep_initial) FA.BannerRotator.images[FA.BannerRotator.images.length] = FA.BannerRotator.logo.src;
                if (FA.BannerRotator.remember_position && index) {
                  FA.BannerRotator.index = +index;
                  FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index] || FA.BannerRotator.images[0];
                }
             
                FA.BannerRotator.next(FA.BannerRotator.start_delay);
              } else if (window.console && window.console.warn) {
                console.warn('Your forum version is not optimized for this plugin');
              }
            }
          };
       
          if (!window.FA) FA = {};
          if (!FA.BannerRotator) {
            FA.BannerRotator = BannerRotator;
         
            if (FA.BannerRotator.preload) {
              for (var i = 0, j = FA.BannerRotator.images.length, img; i < j; i++) {
                img = document.createElement('IMG');
                img.src = FA.BannerRotator.images[i];
              }
            }
         
            $(FA.BannerRotator.init);
          }
        }());

Now what i use is this in my html:

Code:

<div id="ttAffSys"><span id="ttAffTit">Forum Affiliates"</span><br />
<span id="ttAffImg"><img src="//" /></span>
</div>
<style> #ttAffSys{position:fixed;height:15px;bottom:15px;left:15px;}
#ttAffTit{font-family:Trebuchet MS;font-size:12px;text-decoration:underline;color:#ccc;}
</style>

I want this rotation system to show up after like 30 seconds with an opacity liked effect and then go away the same way after like 2 minutes.

Can we somehow do that?

Thanks for any response,
Luffy

Hi @Luffy,

Change your script into this :

Code:

(function() {
          var BannerRotator = {
            images : [
              'http://i86.servimg.com/u/f86/18/96/91/93/117.png',
              'http://i86.servimg.com/u/f86/18/96/91/93/217.png',
              'http://i86.servimg.com/u/f86/18/96/91/93/314.png',
              'http://i86.servimg.com/u/f86/18/96/91/93/416.png',
              'http://i86.servimg.com/u/f86/18/96/91/93/515.png',
              'http://i86.servimg.com/u/f86/18/96/91/93/616.png',
              'http://i86.servimg.com/u/f86/18/96/91/93/713.png'
            ],
     
            start_delay : 5000,
            duration : 5000,
            height : 'auto',
     
            fade_image : true,
            fade_speed : 1200,
       
            keep_initial : false,
            remember_position : true,
            preload : true,
     
            // technical data below
            index : -1,
            logo : null,
       
            // increment the index and display the next image in rotation after a small delay
            next : function(ms) {
              if (ms === undefined) ms = FA.BannerRotator.duration;
     
              window.setTimeout(function() {
                if (++FA.BannerRotator.index >= FA.BannerRotator.images.length) FA.BannerRotator.index = 0; // reset index when it exceeds "images" length
                if (FA.BannerRotator.remember_position) my_setcookie('fa_banner_index', FA.BannerRotator.index); // remember the last banner shown
           
                // fade banner in and out
                if (FA.BannerRotator.fade_image) {
                  $(FA.BannerRotator.logo).fadeOut(FA.BannerRotator.fade_speed, function() {
                    FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index]; // set next banner
                    $(this).fadeIn(FA.BannerRotator.fade_speed, FA.BannerRotator.next); // fade it in
                  });
                }
     
                // default rotation
                else {
                  FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index];
                  FA.BannerRotator.next();
                }
              }, ms);
            },
       
            // initial start up to get the correct logo node and setup some other settings
            init : function() {
              var logo = document.getElementById('i_AffiliatesSys') || document.getElementById('ttAffImg') || document.getElementById('ttAffImg'),
                  index = my_getcookie('fa_banner_index');
             
              if (logo) {
                FA.BannerRotator.logo = logo.tagName == 'IMG' ? logo : logo.firstChild;
                FA.BannerRotator.logo.style.height = FA.BannerRotator.height;
           
                if (FA.BannerRotator.keep_initial) FA.BannerRotator.images[FA.BannerRotator.images.length] = FA.BannerRotator.logo.src;
                if (FA.BannerRotator.remember_position && index) {
                  FA.BannerRotator.index = +index - 1;
                }
           
                FA.BannerRotator.next(FA.BannerRotator.start_delay);
              } else if (window.console && window.console.warn) {
                console.warn('Your forum version is not optimized for this plugin');
              }
            }
          };
     
          if (!window.FA) FA = {};
          if (!FA.BannerRotator) {
            FA.BannerRotator = BannerRotator;
       
            if (FA.BannerRotator.preload) {
              for (var i = 0, j = FA.BannerRotator.images.length, img; i < j; i++) {
                img = document.createElement('IMG');
                img.src = FA.BannerRotator.images[i];
              }
            }
       
            $(FA.BannerRotator.init);
          }
        }());

and change your HTML to this :

Code:

<div id="ttAffSys"><span id="ttAffTit">Forum Affiliates"</span><br />
<span id="ttAffImg"><img src="http://2img.net/i/fa/empty.gif" /></span>
</div>
<style> #ttAffSys{position:fixed;height:15px;bottom:15px;left:15px;}
  #ttAffTit{font-family:Trebuchet MS;font-size:12px;text-decoration:underline;color:#ccc;}
</style>

FYI you need to include an image src, otherwise the fade in wont work correctly with this.

If you want the image to show after 30 seconds modify the start_delay variable :

Code:

start_delay : 5000,

By default it's 5 seconds. so 30000 will be 30 seconds.

@Ange Tuteur this works but the Title is visible. Can we possible hide that until the popup appears?

And also the rotation never stops.. I want it if possible to spot after lets say 2 rotations of all 7 images..

Bump

I don't know about the title, but can't you hide that by editing the CSS in your HTML ? It says it's set to "bottom:15px;" which means it's 15px from the bottom of the screen. Try using a negative value to hide it. You can also use "display:none" or "visibility:hidden" it depends on what you're doing with the popup.

Anyway for the script, try replacing it with this :

Code:

(function() {
          var BannerRotator = {
            images : [
              'http://i86.servimg.com/u/f86/18/96/91/93/117.png',
              'http://i86.servimg.com/u/f86/18/96/91/93/217.png',
              'http://i86.servimg.com/u/f86/18/96/91/93/314.png',
              'http://i86.servimg.com/u/f86/18/96/91/93/416.png',
              'http://i86.servimg.com/u/f86/18/96/91/93/515.png',
              'http://i86.servimg.com/u/f86/18/96/91/93/616.png',
              'http://i86.servimg.com/u/f86/18/96/91/93/713.png'
            ],

            min_iterations : 0,
            max_iterations : 2,
   
            start_delay : 5000,
            duration : 5000,
            height : 'auto',
   
            fade_image : true,
            fade_speed : 1200,
     
            keep_initial : false,
            remember_position : true,
            preload : true,
   
            // technical data below
            index : -1,
            logo : null,
     
            // increment the index and display the next image in rotation after a small delay
            next : function(ms) {
              if (ms === undefined) ms = FA.BannerRotator.duration;
   
              window.setTimeout(function() {
                if (++FA.BannerRotator.index >= FA.BannerRotator.images.length) {
                  FA.BannerRotator.index = 0; // reset index when it exceeds "images" length
                  if (++FA.BannerRotator.min_iterations >= FA.BannerRotator.max_iterations) {
                    return;
                  }
                }
                if (FA.BannerRotator.remember_position) my_setcookie('fa_banner_index', FA.BannerRotator.index); // remember the last banner shown
         
                // fade banner in and out
                if (FA.BannerRotator.fade_image) {
                  $(FA.BannerRotator.logo).fadeOut(FA.BannerRotator.fade_speed, function() {
                    FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index]; // set next banner
                    $(this).fadeIn(FA.BannerRotator.fade_speed, FA.BannerRotator.next); // fade it in
                  });
                }
   
                // default rotation
                else {
                  FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index];
                  FA.BannerRotator.next();
                }
              }, ms);
            },
     
            // initial start up to get the correct logo node and setup some other settings
            init : function() {
              var logo = document.getElementById('i_AffiliatesSys') || document.getElementById('ttAffImg') || document.getElementById('ttAffImg'),
                  index = my_getcookie('fa_banner_index');
           
              if (logo) {
                FA.BannerRotator.logo = logo.tagName == 'IMG' ? logo : logo.firstChild;
                FA.BannerRotator.logo.style.height = FA.BannerRotator.height;
         
                if (FA.BannerRotator.keep_initial) FA.BannerRotator.images[FA.BannerRotator.images.length] = FA.BannerRotator.logo.src;
                if (FA.BannerRotator.remember_position && index) {
                  FA.BannerRotator.index = +index - 1;
                }
         
                FA.BannerRotator.next(FA.BannerRotator.start_delay);
              } else if (window.console && window.console.warn) {
                console.warn('Your forum version is not optimized for this plugin');
              }
            }
          };
   
          if (!window.FA) FA = {};
          if (!FA.BannerRotator) {
            FA.BannerRotator = BannerRotator;
     
            if (FA.BannerRotator.preload) {
              for (var i = 0, j = FA.BannerRotator.images.length, img; i < j; i++) {
                img = document.createElement('IMG');
                img.src = FA.BannerRotator.images[i];
              }
            }
     
            $(FA.BannerRotator.init);
          }
        }());

I added a new variable "max_iterations" which is the max number of times the rotator will repeat on the page.

Well the rotation works just fine but when it stops, it stucks to the last image shown and it doesn't disappear again..

Oh, you wanted it to disappear ? Find this part :

Code:

                  if (++FA.BannerRotator.min_iterations >= FA.BannerRotator.max_iterations) {
                    return;
                  }

and replace it with this :

Code:

                  if (++FA.BannerRotator.min_iterations >= FA.BannerRotator.max_iterations) {
                    $(FA.BannerRotator.logo).fadeOut(FA.BannerRotator.fade_speed);
                    return;
                  }

Just added fadeOut() to the condition for the image.

Very good! The code works perfectly!

Thanks a lot @Ange Tuteur. I added an animation with a specific duration of 60s and now it's gone after that with the rotator! Thanks a lot!

This is now solved!

Sorry for double posting but i assume that maybe some read it so i'll have to add an update.

@Ange Tuteur i am using a code for my navigation bar to hop up and since the addition of the code only on the index of the forum the hover hop up effect has been messed up and now it's flashing instead of hopping up.

Is the hover effect applied using JavaScript or CSS ?

CSS but it's in different templates.. :S

I gave the same animation name.. Silly me.. lol

Thanks man.. Solved now!