The forum of the forums

Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums

    Banner slide show problem (Banner Rotator)

    avatar
    kyokoong
    New Member


    Posts : 7
    Reputation : 1
    Language : Thai / Eng

    Banner slide show problem (Banner Rotator) Empty Banner slide show problem (Banner Rotator)

    Post by kyokoong January 2nd 2016, 5:59 am

    Technical Details


    Forum version : #Invision
    Position : Founder
    Concerned browser(s) : Mozilla Firefox, Google Chrome, IE
    Who the problem concerns : All members
    When the problem appeared : After put 'Banner rotator' javascript
    Forum link : http://tvxqfichome.thai-forum.net/


    Description of problem


    I put the JavaScript from this topic https://help.forumotion.com/t144239-turn-your-forum-banner-into-a-slide-show in my forum.


    Code:
            (function() {
              var BannerRotator = {
                images :  [ 'http://upic.me/i/7p/ebi01.jpg',
    'http://upic.me/i/x5/3h021.jpg',
    'http://upic.me/i/ln/i6w03.jpg',
    'http://upic.me/i/jv/3o204.jpg',
    'http://upic.me/i/rq/lkv05.jpg',
    'http://upic.me/i/2x/7copycopy.jpg', ],
           
                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);
              }
            }());


    it works. but when I scroll down to bottom, the scrollbar will jump up, It happens with every page which I use this javascript and I don't know how to solve. pls help me, Thanks

    ps. now I use this javascript in the homepage and sub-forum (because I don't want to annoy my members by auto-jump scrollbar in all topics) however, I would like to use it in all the pages of my forum.


    .

      Current date/time is November 11th 2024, 4:33 pm