Forum banner slideshow problem

[mrblake213]

I used this topic to make a slide show forum banner.
https://help.forumotion.com/t144239-turn-your-forum-banner-into-a-slide-show

I only have one problem, there is a second that it doesn't show any image and it shifts the forum up which is annoying.

My current code:

Code:

(function() {
  var BannerRotator = {
    images : [
      'http://imgur.com/QSBe1xD.png',
      'http://imgur.com/bQmdvNr.png',
      'http://imgur.com/uawtQ8i.png'
    ],
 
    start_delay : 2000,
    duration : 2000,
    height : 'auto',
 
    fade_image : true,
    fade_speed : 2000,
 
    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);
  }
}());

and my forum http://thedrasticlegion.forumotion.com/

[skouliki]

hello 

did you check the image urls? maybe an image is the issue

[mrblake213]

Umm..
I'm not really sure but can you try it for yourself or view my forum to see whats wrong.

[skouliki]

you are right the images are ok...but i dont know how to fix it cause its the Edge theme 
lets wait for someone more experience than me

the code works ok to my punbb forum

[SLGray]

I do not see an issue. I only see the 3 images which fade between each change.

[Valoish]

I see the little image skip when on Chrome. @SLGray, are you on FF by chance?

[SLGray]

Yes.

Firefox 50.1.0

[Ape]

Hello the jumping problem is down to the size of the banners the all have to be 100% the same size for all banners 1mill out and it will make the forum jump. I had the same problem until I made them all the same.

[mrblake213]

Edited my code a little bit:

Code:

(function() {
  var BannerRotator = {
    images : [
      'http://imgur.com/fB0hiq6.png',
    ],
 
    start_delay : 2000,
    duration : 2000,
    height : 'auto',
 
    fade_image : true,
    fade_speed : 2000,
 
    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);
  }
}());

The first image is my current header so it is not shown in the code above
https://i.imgur.com/4FArGg5.png

My second image is https://i.imgur.com/fB0hiq6.png

If you view the top bars (http://prntscr.com/drbbu4) it shows that the files are in the same size and also in Photoshop.


EDIT: I currently removed the code since it caused jumping of the forum.