Banner Rotation delay time
3 posters
Page 1 of 1
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);
}
}());
- 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
Last edited by Luffy on Mon 23 May 2016, 23:06; edited 2 times in total
Re: Banner Rotation delay time
Hi @Luffy,
Change your script into this :
and change your HTML to this :
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 :
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,
Re: Banner Rotation delay time
@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..
And also the rotation never stops.. I want it if possible to spot after lets say 2 rotations of all 7 images..
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!
Re: Banner Rotation delay time
Bump
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!
Re: Banner Rotation delay time
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 :
I added a new variable "max_iterations" which is the max number of times the rotator will repeat on the page.
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.
Re: Banner Rotation delay time
Well the rotation works just fine but when it stops, it stucks to the last image shown and it doesn't disappear again..
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!
Re: Banner Rotation delay time
Oh, you wanted it to disappear ? Find this part :
and replace it with this :
- 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;
}
Re: Banner Rotation delay time
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!
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!
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!
Re: Banner Rotation delay time
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.
@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.
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!
Re: Banner Rotation delay time
I gave the same animation name.. Silly me.. lol
Thanks man.. Solved now!
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!
Re: Banner Rotation delay time
Topic solved and archived
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Similar topics
» A second rotation banner???
» Banner Needed(second time)
» Image Delay
» Newsletter Delay 30/03/16
» Delay of typing
» Banner Needed(second time)
» Image Delay
» Newsletter Delay 30/03/16
» Delay of typing
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum