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

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


pedxz wrote: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,

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


Hardcore Gamer wrote: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.

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


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

Hardcore Gamer wrote:Bump.

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

Hardcore Gamer wrote:Bump.

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

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)] + ')'});
  });