Banner Rotation delay time

Go down

Solved Banner Rotation delay time

Post by Luffy on 21/5/2016, 13:51

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 24/5/2016, 00:06; edited 2 times in total
avatar
Luffy
Manager
Manager

Male Posts : 5512
Reputation : 607
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Banner Rotation delay time

Post by Ange Tuteur on 21/5/2016, 15:35

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.
avatar
Ange Tuteur
Forumaster

Male Posts : 13202
Reputation : 2917
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Banner Rotation delay time

Post by Luffy on 21/5/2016, 16:14

@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..
avatar
Luffy
Manager
Manager

Male Posts : 5512
Reputation : 607
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Banner Rotation delay time

Post by Luffy on 22/5/2016, 18:57

Bump
avatar
Luffy
Manager
Manager

Male Posts : 5512
Reputation : 607
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Banner Rotation delay time

Post by Ange Tuteur on 23/5/2016, 13:07

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.
avatar
Ange Tuteur
Forumaster

Male Posts : 13202
Reputation : 2917
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Banner Rotation delay time

Post by Luffy on 23/5/2016, 17:49

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

Male Posts : 5512
Reputation : 607
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Banner Rotation delay time

Post by Ange Tuteur on 23/5/2016, 18:31

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.
avatar
Ange Tuteur
Forumaster

Male Posts : 13202
Reputation : 2917
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Banner Rotation delay time

Post by Luffy on 23/5/2016, 20:04

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!
avatar
Luffy
Manager
Manager

Male Posts : 5512
Reputation : 607
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Banner Rotation delay time

Post by Luffy on 23/5/2016, 20:18

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
avatar
Luffy
Manager
Manager

Male Posts : 5512
Reputation : 607
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Banner Rotation delay time

Post by Ange Tuteur on 23/5/2016, 23:24

Is the hover effect applied using JavaScript or CSS ?
avatar
Ange Tuteur
Forumaster

Male Posts : 13202
Reputation : 2917
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Banner Rotation delay time

Post by Luffy on 24/5/2016, 00:05

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

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

Thanks man.. Solved now! Smile
avatar
Luffy
Manager
Manager

Male Posts : 5512
Reputation : 607
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Banner Rotation delay time

Post by SLGray on 24/5/2016, 00:38

Topic solved and archived


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

avatar
SLGray
Administrator
Administrator

Male Posts : 43483
Reputation : 3091
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

Back to top


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