Randomize your forum banner Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return to the skin page

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.
The forum of the forums
2 posters

    Randomize your forum banner

    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13246
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°1

    Tutorial Randomize your forum banner

    Post by Ange Tuteur February 6th 2015, 10:06 am

    Randomize your forum banner

    This simple trick will allow you to display multiple banners on your forum at random. Only one banner will be shown at once, but it will be different each time you change or reload the page. This will work for any forum version. Smile

    Randomize your forum banner Fafm10


    Installation

    Go to Administration Panel > Modules > JavaScript codes management, and create a new script.

    Title : Random banner
    Placement : In all the pages
    Paste the following code :
    Code:
    $(function() {
      var banners = [
        'https://i.servimg.com/u/f38/18/21/60/73/b010.png',
        'https://i.servimg.com/u/f38/18/21/60/73/b110.png',
        'https://i.servimg.com/u/f38/18/21/60/73/b210.png',
        'https://i.servimg.com/u/f38/18/21/60/73/b310.png',
        'https://i.servimg.com/u/f38/18/21/60/73/b410.png',
        'https://i.servimg.com/u/f38/18/21/60/73/b510.png'
      ],

      logo = document.getElementById('i_logo') || document.getElementById('logo') || document.getElementById('pun-logo');
      if (logo) (logo.tagName == 'IMG' ? logo : logo.firstChild).src = banners[Math.floor(Math.random() * banners.length)];
    });


    Modifications

    There's only one simple modification for you to make. At the top of the script you'll see an array of banners :
    Code:
      var banners = [
        'https://i.servimg.com/u/f38/18/21/60/73/b010.png',
        'https://i.servimg.com/u/f38/18/21/60/73/b110.png',
        'https://i.servimg.com/u/f38/18/21/60/73/b210.png',
        'https://i.servimg.com/u/f38/18/21/60/73/b310.png',
        'https://i.servimg.com/u/f38/18/21/60/73/b410.png',
        'https://i.servimg.com/u/f38/18/21/60/73/b510.png'
      ],

    You can replace or delete these image URLs, and add your own. Multiple banners should be separated by a comma, and the banner URL should be between quotes ! Here's an example of only two banners :
    Code:
      var banners = [
        'https://i.servimg.com/u/f38/18/21/60/73/b010.png',
        'https://i.servimg.com/u/f38/18/21/60/73/b110.png'
      ],


    As you can see, you can have as little or as many banners as you want ! Mr. Green





    This tutorial was written by Ange Tuteur.
    • Back to top
    skouliki
    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15167
    Reputation : 1696
    Language : English,Greek
    Location : Greece
    • Post n°2

    Tutorial Re: Randomize your forum banner

    Post by skouliki February 11th 2020, 10:08 am

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

    updated 11.02.2020 by skouliki

    • Back to top