Randomize your forum banner

[Ange TuteurAdministrator]

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 trick will work for any forum version.

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 = [
    'http://i38.servimg.com/u/f38/18/21/60/73/b010.png',
    'http://i38.servimg.com/u/f38/18/21/60/73/b110.png',
    'http://i38.servimg.com/u/f38/18/21/60/73/b210.png',
    'http://i38.servimg.com/u/f38/18/21/60/73/b310.png',
    'http://i38.servimg.com/u/f38/18/21/60/73/b410.png',
    'http://i38.servimg.com/u/f38/18/21/60/73/b510.png'
  ],

  logo = document.getElementById('i_logo') || document.getElementById('logo') || document.getElementById('pun-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 and array of banners :

Code:

  var banners = [
    'http://i38.servimg.com/u/f38/18/21/60/73/b010.png',
    'http://i38.servimg.com/u/f38/18/21/60/73/b110.png',
    'http://i38.servimg.com/u/f38/18/21/60/73/b210.png',
    'http://i38.servimg.com/u/f38/18/21/60/73/b310.png',
    'http://i38.servimg.com/u/f38/18/21/60/73/b410.png',
    'http://i38.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 = [
    'http://i38.servimg.com/u/f38/18/21/60/73/b010.png',
    'http://i38.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 ! If you have any comments or questions, you may leave them below. Have fun !

Notice

Tutorial written by Ange Tuteur. Reproduction not permitted without consent from the author.

[Michael_vx]

thanks a lot in the 1st place
i like also to ask about something
can i add more banners i see 6 banners in the script
so if i added more links is it still okay or still other mode needed ?

[FISH CRAZY]

I am running 10 banners on my forum and it has been running now for 9 months grate

[Ange TuteurAdministrator]

@Michael_vx, As FISH CRAZY mentioned, you can add as many banners as you want. Just make sure each one is separated by a comma.

[brandon_g]

This refers to the banner on top?

[FISH CRAZY]

Yes the top banner

[Michael_vx]

understand now  
thanks a lot

[Ape]

Hello @Ange Tuteur
me and Fish crazy are using a code you gave some time back that sort of fits this but with a fade in and out

Code:

(function() {
  var BannerRotator = {
    images : [
      'https://i37.servimg.com/u/f37/18/12/91/84/untitl44.png',
      'https://i37.servimg.com/u/f37/18/12/91/84/untitl45.png',
      'https://i37.servimg.com/u/f37/18/12/91/84/untitl46.png',
      'https://i37.servimg.com/u/f37/18/12/91/84/untitl47.png',
    ],
 
    start_delay : 5000,
    duration : 5000,
    height : '100%',
 
    fade_image : true,
    fade_speed : 1200,
   
    keep_initial : false,
    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);
  }
}());

the problem we are having on this site ishcrazyaquatics.4umotion.com is when this is turned on it make the editor on the PM system go away so you can not use the editor

is something wrong with the code ?

[GuestGuest]

@Ape: May this be the cause? I believe you added one comma too many...

[Ape]

That fixed the Quick reply but the one in the PM system is still the same but thank you for your help @Samantha NL

[GuestGuest]

That fixed the Quick reply but the one in the PM system is still the same but thank you for your help @Samantha NL

@Ape: Yw. Try changing the JS placement from 'All Pages' to 'HomePage' (or 'Index') + 'Sub-Forums' + 'Topics'. I haven't got the script running on my phpBB3 so I couldn't test it, but to me it's more logical to have it specified like that. I always consider the placement, I don't just copy & paste

[Ange TuteurAdministrator]

@Ape I tested the script ( w/the correction Samantha mentioned ) on my test forum and it worked without any issues in the PM page. I believe another script on your forum -- most likely in all the pages -- is causing an error on the forum when viewing the PM page. Open your console ( F12 > Console / Right click > Inspect > Console ) to see if there are any JS errors.

[Ape]

This is what i get

Code:

uncaught exception: Dimensions: jQuery collection is empty  (unknown)
Use of getPreventDefault() is deprecated.  Use defaultPrevented instead.  jquery.min.js:3:7108
TypeError: jQuery(...).text(...).match(...) is null[Learn More]  privmsg:737:29
TypeError: jQuery(...).text(...).match(...) is null[Learn More]  privmsg:741:31


[Ange TuteurAdministrator]

@Ape hmm.. would you mind providing me a test account for the forum ? It should give me a better picture of where the error is coming from.

[Ape]

yes sure
username : test account
password: test1234

[Ange TuteurAdministrator]

Thanks, but there seems to be a post limit before sending PMs, so I can't test it right now. ( I made 1 post to test btw, sorry bout that lol )

[Ape]

sorry it was set to 10 but now its 1 so you can test it now

[Ange TuteurAdministrator]

Thanks !

From what I can tell, I don't *think* it's coming from JS codes management, but I'm not completely sure either. The error log in the console definitely isn't helping all too much. So I'd like you to try a few things to root out the cause :

1. Disable JS codes management and then check the send PM page to see if the editor is available.
2. If 1 doesn't work, try forcing the default templates.

Let me know if any of the above solutions return the editor.

[Ape]

yes if i remove the JavaScript it comes back

[GuestGuest]

@Ape, switch it back on and switch on the rotating banner script 1st. Then, one by one, switch on each other JS and see what script is conflicting with the rotating banner script. When all are on and you left out the conflicting script it should still be running and you know where the fault is.

[Ange TuteurAdministrator]

I see, that narrows it down then. Try ruling out which script it is via process of elimination ; checking the PM page every time when you disable each JS file.

[Ape]

ok i have worked out its this code thats messing it up but as its Fish crazys forum im not 100% sure what this code is it's in 2 parts

In all pages :

Code:

$(document).ready(function(){
            $('#one').liteAccordion({
                          onActivate : function() {
                              this.find('figcaption').fadeOut();
                          },
                          slideCallback : function() {
                              this.find('figcaption').fadeIn();
                          },
                          autoPlay : true,
                          pauseOnHover : true,
                          theme : 'dark',
                          rounded : true,
                          enumerateSlides : true           
                    }).find('figcaption:first').show();
            });

and

All pages:

Code:

/*************************************************
            *
            *  project:    liteAccordion - horizontal accordion plugin for jQuery
            *  author:    Nicola Hibbert
            *  url:        http://nicolahibbert.com/horizontal-accordion-jquery-plugin
            *  demo:        http://www.nicolahibbert.com/demo/liteAccordion
            *
            *  Version:    1.1.3
            *  Copyright:    (c) 2010-2011 Nicola Hibbert
            *
            /*************************************************/
            (function($) {
           
              $.fn.liteAccordion = function(options) {
                     
                  // defaults
                    var defaults = {
                    containerWidth : 1142,
                    containerHeight : 224,
                    headerWidth : 48,
                 
                    firstSlide : 1,
                    onActivate : function() {},
                    slideSpeed : 800,
                    slideCallback : function() {},       
                 
                    autoPlay : false,
                    pauseOnHover : false,
                    cycleSpeed : 6000,
 
                    theme : 'basic', // basic, light*, dark, stitch*
                    rounded : false,
                    enumerateSlides : false
                  },
               
                  // merge defaults with options in new settings object           
                    settings = $.extend({}, defaults, options),
           
                  // define key variables
                    $accordion = this,
                    $slides = $accordion.find('li'),
                    slideLen = $slides.length,
                    slideWidth = settings.containerWidth - (slideLen * settings.headerWidth),
                    $header = $slides.children('h2'),
                 
                  // core utility and animation methods
                    utils = {
                        getGroup : function(pos, index) {     
                          if (this.offsetLeft === pos.left) {
                              return $header.slice(index + 1, slideLen).filter(function() { return this.offsetLeft === $header.index(this) * settings.headerWidth });
                          } else if (this.offsetLeft === pos.right) {
                              return $header.slice(0, index + 1).filter(function() { return this.offsetLeft === slideWidth + ($header.index(this) * settings.headerWidth) }); 
                          }               
                        },
                        nextSlide : function(slideIndex) {
                          var slide = slideIndex + 1 || settings.firstSlide;
 
                          // get index of next slide
                          return function() {
                              return slide++ % slideLen;
                          }
                        },
                        play : function(slideIndex) {
                          var getNext = utils.nextSlide((slideIndex) ? slideIndex : ''), // create closure
                              start = function() {
                                $header.eq(getNext()).click();
                              };
                       
                          utils.playing = setInterval(start, settings.cycleSpeed);       
                        },
                        pause : function() {
                          clearInterval(utils.playing);
                        },
                        playing : 0,
                        sentinel : false
                    };     
               
                  // set container heights, widths, theme & corner style
                  $accordion
                    .height(settings.containerHeight)
                    .width(settings.containerWidth)
                    .addClass(settings.theme)
                    .addClass(settings.rounded && 'rounded');
               
                  // set tab width, height and selected class
                  $header
                    .width(settings.containerHeight)
                    .height(settings.headerWidth)
                    .eq(settings.firstSlide - 1).addClass('selected');
               
                  // ie :(
                  if ($.browser.msie) {
                    if ($.browser.version.substr(0,1) > 8) {
                        $header.css('filter', 'none');
                    } else if ($.browser.version.substr(0,1) < 7) {
                        return false;
                    }
                  }
               
                  // set initial positions for each slide
                  $header.each(function(index) {
                    var $this = $(this),
                        left = index * settings.headerWidth;
                     
                    if (index >= settings.firstSlide) left += slideWidth;
                 
                    $this
                        .css('left', left)
                        .next()
                          .width(slideWidth)
                          .css({ left : left, paddingLeft : settings.headerWidth });
                 
                    // add number to bottom of tab
                    settings.enumerateSlides && $this.append('<b>' + (index + 1) + '</b>');       
 
                  }); 
                     
                  // bind event handler for activating slides
                  $header.click(function(e) {
                    var $this = $(this),
                        index = $header.index($this),
                        $next = $this.next(),
                        pos = {
                          left : index * settings.headerWidth,
                          right : index * settings.headerWidth + slideWidth,
                          newPos : 0
                        },
                        $group = utils.getGroup.call(this, pos, index);
                                 
                    // set animation direction
                    if (this.offsetLeft === pos.left) {
                        pos.newPos = slideWidth;
                    } else if (this.offsetLeft === pos.right) {
                        pos.newPos = -slideWidth;
                    }
                 
                    // check if animation in progress
                    if (!$header.is(':animated')) {
 
                        // activate onclick callback with slide div as context     
                        if (e.originalEvent) {
                          if (utils.sentinel === this) return false;
                          settings.onActivate.call($next);
                          utils.sentinel = this;
                        } else {
                          settings.onActivate.call($next);
                          utils.sentinel = false;
                        }
 
                        // remove, then add selected class
                        $header.removeClass('selected').filter($this).addClass('selected');
                 
                        // get group of tabs & animate       
                        $group
                        .animate({ left : '+=' + pos.newPos }, settings.slideSpeed, function() { settings.slideCallback.call($next) })
                          .next()
                          .animate({ left : '+=' + pos.newPos }, settings.slideSpeed);
                           
                    }
                  });
                 
                  // pause on hover       
                  if (settings.pauseOnHover) {
                    $accordion.hover(function() {
                        utils.pause();
                    }, function() {
                        utils.play($header.index($header.filter('.selected')));
                    });
                  }
                     
                  // start autoplay, call utils with no args = start from firstSlide
                  settings.autoPlay && utils.play();
               
                  return $accordion;
               
              };
           
            })(jQuery);

the bottom code is not the problem its more the top one

if i turn the top one on the problem shows.

[GuestGuest]

My best guess is 'left' is causing this, cuz #left has been reserved for the widgets.

[Ace 1Valued Member]

Idk but it might be the fact that

Code: $.find()

is chained to that liteAccordion function.

I don't really know what calling that liteAccordion function does, so don't quote me on this.

[GuestGuest]

Idk but it might be the fact that

Code: $.find()

is chained to that liteAccordion function.

I don't really know what calling that liteAccordion function does, so don't quote me on this.

... it calls for a roll of drums, for sure ...

Your assumption may be a bit preliminary...


Now we're even

[Sponsored content]