The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Forum banner slideshow problem

View previous topic View next topic Go down

Forum banner slideshow problem

Post by mrblake213 on January 3rd 2017, 11:13 am

I used this topic to make a slide show forum banner.
http://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/
avatar
mrblake213
New Member

Posts : 8
Reputation : 2
Language : English

http://thedrasticlegion.forumotion.com

Back to top Go down

Re: Forum banner slideshow problem

Post by skouliki on January 3rd 2017, 12:45 pm

hello

did you check the image urls? maybe an image is the issue
avatar
skouliki
Graphic Designer
Graphic Designer

Female Posts : 3137
Reputation : 491
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: Forum banner slideshow problem

Post by mrblake213 on January 3rd 2017, 2:44 pm

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

Posts : 8
Reputation : 2
Language : English

http://thedrasticlegion.forumotion.com

Back to top Go down

Re: Forum banner slideshow problem

Post by skouliki on January 3rd 2017, 3:42 pm

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

the code works ok tomy punbbforum
avatar
skouliki
Graphic Designer
Graphic Designer

Female Posts : 3137
Reputation : 491
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: Forum banner slideshow problem

Post by SLGray on January 3rd 2017, 9:53 pm

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 40870
Reputation : 2774
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Re: Forum banner slideshow problem

Post by Valoish on January 3rd 2017, 9:56 pm

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

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Re: Forum banner slideshow problem

Post by SLGray on January 3rd 2017, 9:57 pm

Yes.

Firefox 50.1.0


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 40870
Reputation : 2774
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Re: Forum banner slideshow problem

Post by APE on January 3rd 2017, 10:52 pm

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.



avatar
APE
Manager
Manager

Male Posts : 11003
Reputation : 1031
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Re: Forum banner slideshow problem

Post by mrblake213 on January 4th 2017, 9:42 am

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
http://i.imgur.com/4FArGg5.png

My second image is http://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.
avatar
mrblake213
New Member

Posts : 8
Reputation : 2
Language : English

http://thedrasticlegion.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum