The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Banner Rotation delay time

View previous topic View next topic Go down

Solved Banner Rotation delay time

Post by Luffy on May 21st 2016, 1:51 pm

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 :rose:


Last edited by Luffy on May 24th 2016, 12:06 am; edited 2 times in total

Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Banner Rotation delay time

Post by Ange Tuteur on May 21st 2016, 3:35 pm

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://illiweb.com/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
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Banner Rotation delay time

Post by Luffy on May 21st 2016, 4:14 pm

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






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Banner Rotation delay time

Post by Luffy on May 22nd 2016, 6:57 pm

Bump






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Banner Rotation delay time

Post by Ange Tuteur on May 23rd 2016, 1:07 pm

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.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Banner Rotation delay time

Post by Luffy on May 23rd 2016, 5:49 pm

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






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Banner Rotation delay time

Post by Ange Tuteur on May 23rd 2016, 6:31 pm

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.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Banner Rotation delay time

Post by Luffy on May 23rd 2016, 8:04 pm

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!






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Banner Rotation delay time

Post by Luffy on May 23rd 2016, 8:18 pm

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






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Banner Rotation delay time

Post by Ange Tuteur on May 23rd 2016, 11:24 pm

Is the hover effect applied using JavaScript or CSS ?

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Banner Rotation delay time

Post by Luffy on May 24th 2016, 12:05 am

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

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

Thanks man.. Solved now! Smile






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Banner Rotation delay time

Post by SLGray on May 24th 2016, 12:38 am

Topic solved and archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35667
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum