Turn your forum banner into a slide show

[Ange Tuteur]

Turn your forum banner into a slide show

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 Code: 5000 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 Code: 5000 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 Code: auto 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 Code: true the images will fade in and out. Setting this option to Code: false will disable the fade effect. fade_duration : Defines how fast the fade effect should be in miliseconds. Example : Code: 1200 = 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 : Code: 1200 * 2 = 2400 which is equal to 2.4 seconds. keep_initial : When this option is set to Code: true it will keep your default banner, and add it to the rotation as well. Set this option to Code: false if you want to remove the default banner from the rotation. remember_position : When this option is set to Code: true 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 Code: false if you want the banner slide show to start over each time. preload : When this option is set to Code: true 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 Code: false . 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 !

This tutorial was written by Ange Tuteur.

[skouliki]

This code was updated to fit in with the new HTTPS address

updated 13.03.2022 by skouliki