IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» Forumactif Edge - Releases
by Ange Tuteur Thu 14 Dec 2017, 11:25

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

» Numbering of messages in the topic
by SLGray Mon 04 Dec 2017, 22:40

Recent Tutorials
Top posting users this month

Who is online?
In total there are 8 users online :: 0 Registered, 0 Hidden and 8 Guests

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Issue About Banner Rotator

View previous topic View next topic Go down

avatar
Paradiseng

Title :
Gender : Male
Posts : 98
Points : 1618
Reputation : 19
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.nigerianpalace.com

PostParadiseng on Tue 22 Nov 2016, 10:28

Hello @Ange Tuteur I saw this tutorial somewhere about banner rotator, code is below
Code:
(function() {
  var BannerRotator = {
    images : [
      'https://i97.servimg.com/u/f97/19/55/14/71/untitl19.png',     
      'https://i97.servimg.com/u/f97/19/55/14/71/untitl14.png',
      'https://i97.servimg.com/u/f97/19/55/14/71/untitl17.png',
      'https://i97.servimg.com/u/f97/19/55/14/71/untitl18.png',
      'https://i97.servimg.com/u/f97/19/55/14/71/untitl20.png',
      'https://i97.servimg.com/u/f97/19/55/14/71/untitl21.png'
    ],
 
    start_delay : 0,
    duration : 10000,
    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);
  }
}());

1. I want ask, is there a way to make the banner rotate at every time the page is refreshed or reloaded

or

2. Again, is there a way to make the banner rotate to the next banner at every day? scratch
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4725
Points : 9714
Reputation : 2359
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 22 Nov 2016, 11:13

@Paradiseng number 1 should be easy to do. See if the following works for you.
Code:
(function() {
  var BannerRotator = {
    images : [
      'https://i97.servimg.com/u/f97/19/55/14/71/untitl19.png',   
      'https://i97.servimg.com/u/f97/19/55/14/71/untitl14.png',
      'https://i97.servimg.com/u/f97/19/55/14/71/untitl17.png',
      'https://i97.servimg.com/u/f97/19/55/14/71/untitl18.png',
      'https://i97.servimg.com/u/f97/19/55/14/71/untitl20.png',
      'https://i97.servimg.com/u/f97/19/55/14/71/untitl21.png'
    ],
 
    start_delay : 0,
    duration : Infinity,
    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); // fade it in
          });
        }
 
        // default rotation
        else {
          FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index];
        }
      }, 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);
  }
}());

If it works, it should rotate the banner whenever the page is changed.

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Paradiseng

Title :
Gender : Male
Posts : 98
Points : 1618
Reputation : 19
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.nigerianpalace.com

PostParadiseng on Tue 22 Nov 2016, 11:35

Thanks alot
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4725
Points : 9714
Reputation : 2359
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 22 Nov 2016, 12:44

Anytime ! Doff

Topic archived

--------

Ange Tuteur
Tips and TricksContact Me

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

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