"Randomize your forum banner" not displaying banner in correct position

[Hardcore Gamer]

https://help.forumotion.com/t138806-randomize-your-forum-banner

I am using the above tutorial on ModernBB. The theme I am using is http://demo.nicetheme.com/forum?theme_id=213853

Using the tutorial makes my banners go to the right of the page, all messed up.

[tikky]

Hey,
Change your code to

Code:

var banner = new Array();
 
banner[0]='http://i38.servimg.com/u/f38/18/21/60/73/b010.png';
banner[1]='https://i62.servimg.com/u/f62/19/61/71/04/banner16.jpg';
banner[2]='http://i38.servimg.com/u/f38/18/21/60/73/b110.png';
banner[3]='http://i38.servimg.com/u/f38/18/21/60/73/b210.png';
banner[4]='https://i62.servimg.com/u/f62/19/61/71/04/banner18.jpg';
banner[5]='http://i38.servimg.com/u/f38/18/21/60/73/b310.png';
 
document.getElementById('logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)]; setInterval("document.getElementById('logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];",3000);


Thanks,

[Hardcore Gamer]

Hey,
Change your code to

Code:

var banner = new Array();
 
banner[0]='http://i38.servimg.com/u/f38/18/21/60/73/b010.png';
banner[1]='https://i62.servimg.com/u/f62/19/61/71/04/banner16.jpg';
banner[2]='http://i38.servimg.com/u/f38/18/21/60/73/b110.png';
banner[3]='http://i38.servimg.com/u/f38/18/21/60/73/b210.png';
banner[4]='https://i62.servimg.com/u/f62/19/61/71/04/banner18.jpg';
banner[5]='http://i38.servimg.com/u/f38/18/21/60/73/b310.png';
 
document.getElementById('logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)]; setInterval("document.getElementById('logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];",3000);


Thanks,

I have two banners in rotation, this doesn't seem to work at all.

[Hardcore Gamer]

Bump.

[tikky]

change to:

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);
  }
}());


by @Ange Tuteur

[Hardcore Gamer]

Hmm, that seems to do a banner slideshow. Is it possible for the banner to change randomly upon refreshing the forum only?

Thanks again.

[Hardcore Gamer]

Bump.

My forum banner size is 2560x605. I have three of them that I would like in rotation. The tutorial works in the OP, but they're off centred and all to the right of the page.

[Hardcore Gamer]

Bump.

[Hardcore Gamer]

My forum banner size is 2560x605. I have three of them that I would like in rotation. The tutorial works in the OP, but they're off centred and all to the right of the page.

Bump.

[Hardcore Gamer]

Bump.

[Guest]

Hello @Hardcore Gamer

Please go:
ACP(Admin Control Panel) > Modules > HTML & JAVASCRIPT > Javascript codes management > Create a new Javascript

• Title: whichever you want
  
• Position: All the pages
  
• Javascript code:

  Code:

  $(function(){   
  var banner = new Array();
 
//########################## EDITABLE ZONE ##################################
  var segundosDesfile = 5; //The seconds it takes to the banner to change to the following banner
  var random = false; //Change to -true- if you want that the banners change be automatic
  var speedTransition = "slow"; //You can change to -fast- the transition effect
 
  banner[0] = "URL_BANNER_1";
  banner[1] = "URL_BANNER_2";
  //You can add more...
//########################## END EDITABLE ZONE #############################
 
  var i_act = 0;
  var sel = "img#i_logo, a#logo img, a#pun-logo img";
  $(sel).attr("src", banner[random ? Math.floor(Math.random() * banner.length) : i_act]);
  setInterval(function() { 
      $(sel).fadeOut(speedTransition,function(){
        $(sel).load(function(){
            $(sel).fadeIn();
        });
        $(sel).attr("src", banner[random ? Math.floor(Math.random() * banner.length) : ++i_act]);
      }); 
      if(!random && i_act == banner.length-1) i_act = -1;
  }, segundosDesfile * 1000); 
});


Please let me know if this works for you or if you have any doubt so we can solve it

Greetings.

[Hardcore Gamer]

@mpelmmc Hi there, the header seems to be way off still. I will send you a screenshot and my forum link through PM.

EDIT: I'd also like it if the banner changes when refreshing the page, and not a slideshow.

Thanks for your help.

[Guest]

Hello,

Please install the code I gave you in your forum in order to try to make it fit into your forum. I don't see it installed and therefore I cannot adjust it via CSS.

Also, I'd be useful if you could explain or provide screenshots about in what part you want of the header to be, this way we would give you a faster answer .

Greetings.

[Hardcore Gamer]

Hmm, I can send you a screenshot of what it is meant to look like through DM. I can't really keep the code up for too long as it ruins the whole forum and members will start to ask what's happening/it will look unprofessional.

[Guest]

Okay, I see what you mean.

I'm afraid I can't help with this because the way you want to edit the banner is meant to through a more advanced CSS and javascript knowledge that's really beyond me, so I think I can't help you any further than I did.

I'm sorry.

[Hardcore Gamer]

https://help.forumotion.com/t138806-randomize-your-forum-banner

This code pretty much works, but the header just isn't aligned and centred properly in the middle.

[SLGray]

Are the banners all the same size and sized correctly for the area of the forum?

[Hardcore Gamer]

Are the banners all the same size and sized correctly for the area of the forum?

All the banners are 2560x605, yes, all the same size.

[Hardcore Gamer]

I am starting to think maybe this code works better in templates? Is that possible, would that be a better way?

[Hardcore Gamer]

Bump.

[Hardcore Gamer]

Another bump.

[Hardcore Gamer]

Bump.

I'm sure someone with the knowledge will see this one day and will be willing to help. Thanks.

[Hardcore Gamer]

Bump.

[Hardcore Gamer]

Bump.

I'm sure someone with the knowledge will see this one day and will be willing to help. Thanks.

[Hardcore Gamer]

Bump.

I'm sure someone with the knowledge will see this one day and will be willing to help. Thanks.

This code really needs fixing for ModernBB.

[tikky]

Try:

Code:

$(function() {
    var images = ['http://78.media.tumblr.com/6e79dd6dbfa7248e60a48ba9c36c4a7d/tumblr_nfvqpd8cgr1qzeylbo1_1280.gif', 'https://i.pinimg.com/originals/2e/35/95/2e359568d36c711612bdde426a28a51f.gif'];
    $('.headerbar').css({'background-image': 'url(' + images[Math.floor(Math.random() * images.length)] + ')'});
  });


[Hardcore Gamer]

WOW! That code actually works. I can't believe it. Thank you.

The only issue I find is that upon refreshing, sometimes the transition between banners is jarring and not instant. I'm not sure if it's possible to fix that? Like, sometimes when I hit the refresh button, the banner doesn't change to a new one...

Seriously, thank you again.

[Hardcore Gamer]

This is pretty much solved, honestly. The code works fine.

I think one of the staff members should update the tips & tricks thread and use the above code for ModernBB.