The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Banner Rotation delay time

3 posters

Go down

Solved Banner Rotation delay time

Post by TheCrow Sat 21 May 2016, 12: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 Mon 23 May 2016, 23:06; edited 2 times in total
TheCrow
TheCrow
Manager
Manager

Male Posts : 6916
Reputation : 795
Language : Greek, English

https://www.inforumgr.com

Back to top Go down

Solved Re: Banner Rotation delay time

Post by Ange Tuteur Sat 21 May 2016, 14: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://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
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Banner Rotation delay time

Post by TheCrow Sat 21 May 2016, 15: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..


Banner Rotation delay time Thecro10
Forum of the Forums

Forumotion Rules | Tips & Tricks |
FAQ | Did you forget your password?



*** The Support Forum will never ask you for your email or password, so please do not post them anywhere! ***
No support via PM!
TheCrow
TheCrow
Manager
Manager

Male Posts : 6916
Reputation : 795
Language : Greek, English

https://www.inforumgr.com

Back to top Go down

Solved Re: Banner Rotation delay time

Post by TheCrow Sun 22 May 2016, 17:57

Bump


Banner Rotation delay time Thecro10
Forum of the Forums

Forumotion Rules | Tips & Tricks |
FAQ | Did you forget your password?



*** The Support Forum will never ask you for your email or password, so please do not post them anywhere! ***
No support via PM!
TheCrow
TheCrow
Manager
Manager

Male Posts : 6916
Reputation : 795
Language : Greek, English

https://www.inforumgr.com

Back to top Go down

Solved Re: Banner Rotation delay time

Post by Ange Tuteur Mon 23 May 2016, 12: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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Banner Rotation delay time

Post by TheCrow Mon 23 May 2016, 16: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


Banner Rotation delay time Thecro10
Forum of the Forums

Forumotion Rules | Tips & Tricks |
FAQ | Did you forget your password?



*** The Support Forum will never ask you for your email or password, so please do not post them anywhere! ***
No support via PM!
TheCrow
TheCrow
Manager
Manager

Male Posts : 6916
Reputation : 795
Language : Greek, English

https://www.inforumgr.com

Back to top Go down

Solved Re: Banner Rotation delay time

Post by Ange Tuteur Mon 23 May 2016, 17: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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Banner Rotation delay time

Post by TheCrow Mon 23 May 2016, 19: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!


Banner Rotation delay time Thecro10
Forum of the Forums

Forumotion Rules | Tips & Tricks |
FAQ | Did you forget your password?



*** The Support Forum will never ask you for your email or password, so please do not post them anywhere! ***
No support via PM!
TheCrow
TheCrow
Manager
Manager

Male Posts : 6916
Reputation : 795
Language : Greek, English

https://www.inforumgr.com

Back to top Go down

Solved Re: Banner Rotation delay time

Post by TheCrow Mon 23 May 2016, 19: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


Banner Rotation delay time Thecro10
Forum of the Forums

Forumotion Rules | Tips & Tricks |
FAQ | Did you forget your password?



*** The Support Forum will never ask you for your email or password, so please do not post them anywhere! ***
No support via PM!
TheCrow
TheCrow
Manager
Manager

Male Posts : 6916
Reputation : 795
Language : Greek, English

https://www.inforumgr.com

Back to top Go down

Solved Re: Banner Rotation delay time

Post by Ange Tuteur Mon 23 May 2016, 22:24

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

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Banner Rotation delay time

Post by TheCrow Mon 23 May 2016, 23:05

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

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

Thanks man.. Solved now! Smile


Banner Rotation delay time Thecro10
Forum of the Forums

Forumotion Rules | Tips & Tricks |
FAQ | Did you forget your password?



*** The Support Forum will never ask you for your email or password, so please do not post them anywhere! ***
No support via PM!
TheCrow
TheCrow
Manager
Manager

Male Posts : 6916
Reputation : 795
Language : Greek, English

https://www.inforumgr.com

Back to top Go down

Solved Re: Banner Rotation delay time

Post by SLGray Mon 23 May 2016, 23:38

Topic solved and archived


Banner Rotation delay time Slgray10

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

Male Posts : 51522
Reputation : 3523
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top

- Similar topics

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