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.

Turn your forum banner into a slide show

2 posters

Go down

Tutorial Turn your forum banner into a slide show

Post by Ange Tuteur 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

Turn your forum banner into a slide show Captur12

You can use this plugin on any version, so long as you haven't heavily modified the forum templates.


Turn your forum banner into a slide show 09615110 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 ! Wink


Turn your forum banner into a slide show 09615110 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 !! 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
Ange Tuteur
Forumaster

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

https://fmdesign.forumotion.com

TonnyKamper and hazzy like this post

Back to top Go down

Tutorial Re: Turn your forum banner into a slide show

Post by skouliki March 13th 2022, 1:52 pm

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

updated 13.03.2022 by skouliki
skouliki
skouliki
Manager
Manager

Female Posts : 15408
Reputation : 1709
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

TonnyKamper likes this post

Back to top Go down

Back to top

- Similar topics

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