This tutorial will help teach you how to turn your forum banner into a slide show, so you can show multiple banners at once instead of one. 
You can use this plugin on any version, so long as you haven't heavily modified the forum templates.
 1. Installing the JavaScript
To install this plugin go to Admin Panel > Modules > JavaScript codes management and create a new script with the following settings.
Title : Banner Rotator
Placement : In all the pages
- Code:
(function() {
var BannerRotator = {
images : [
'https://i21.servimg.com/u/f21/18/21/60/73/free10.png',
'https://i21.servimg.com/u/f21/18/21/60/73/logo10.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_logo') || document.getElementById('logo') || document.getElementById('pun-logo'),
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);
}
}());
You can save the script now, however, it needs to be modified so it's personalized for your forum. So make sure to read the next section ! 
2. Modifications
This plugin contains various settings at the top of the script which you can modify. Each setting will be listed below along with a description.
images : At the top of the script is an array of images that are displayed after a set amount of time. You can include as many images as you want, so long as each image URL is separated by a comma. Currently, it looks like this :
- Code:
images : [
'https://i21.servimg.com/u/f21/18/21/60/73/free10.png',
'https://i21.servimg.com/u/f21/18/21/60/73/logo10.png'
],
So if I want to add another image to the rotation, I'll need to add a comma after the last image URL and insert another image surrounded by apostrophes.
- Code:
images : [
'https://i21.servimg.com/u/f21/18/21/60/73/free10.png',
'https://i21.servimg.com/u/f21/18/21/60/73/logo10.png',
'https://i21.servimg.com/u/f21/18/21/41/30/captur12.gif'
],
Do this as much as you want to include many images !! 
start_delay : Defines the start up delay in miliseconds (ms) before the default banner is rotated. When set to 0 the next banner in the rotation will be shown instantly, whereas setting it to
will cause it to wait 5 seconds before showing the next banner.
duration : Defines the duration in miliseconds that each rotated banner is displayed. By default each banner is shown for 5 seconds, or
milliseconds. Modify this setting to show banners for a longer or shorter period of time.
height : Defines a default height for all images in the rotation. The measurement used can be px, em, %, etc.. By default, the value is set to
which is the default height of each image. It's recommend to use images of the same dimensions, as images of different sizes can cause jumping, stretching, etc.. Use this option to set a default height if you experience anything of the like.
fade_image : When set to
the images will fade in and out. Setting this option to
will disable the fade effect.
fade_duration : Defines how fast the fade effect should be in miliseconds. Example :
= 1.2 seconds of fading in AND out. So the total fade duration will always be the value you choose multiplied by 2. For example :
which is equal to 2.4 seconds.
keep_initial : When this option is set to
it will keep your default banner, and add it to the rotation as well. Set this option to
if you want to remove the default banner from the rotation.
remember_position : When this option is set to
it will remember the last banner you were on, so when you change the page it'll start up where you left off. Set this option to
if you want the banner slide show to start over each time.
preload : When this option is set to
all images in the script will be preloaded. This can help prevent jumping and partially loaded images. If you don't want the images to be preloaded simply turn this option to
.
That is all the options you can use to customize your banner slide show. Make sure to set it up the way you prefer, and then sit back and watch it in action ! 
|
Hitskin.com
by Ange Tuteur November 6th 2015, 10:59 am
Facebook
Twitter
Pinterest
Youtube
