The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Turn your forum banner into a slide show

View previous topic View next topic Go down

Turn your forum banner into a slide show

Post by Ange Tuteur on November 6th 2015, 10:59 am

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. Smile


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 : [
      'http://i21.servimg.com/u/f21/18/21/60/73/free10.png',
      'http://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 ! Wink


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 : [
      'http://i21.servimg.com/u/f21/18/21/60/73/free10.png',
      'http://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 : [
      'http://i21.servimg.com/u/f21/18/21/60/73/free10.png',
      'http://i21.servimg.com/u/f21/18/21/60/73/logo10.png',
      'http://i21.servimg.com/u/f21/18/21/41/30/captur12.gif'
    ],

Do this as much as you want to include many images !! Yes

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 ! Popcorn


Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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