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
    Forumaster


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

    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




    skouliki
    skouliki
    Manager
    Manager


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

    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


      Current date/time is November 11th 2024, 5:21 pm