https://ycnm.edu.ng/c-learning/theme/jquery.php/theme_adaptable/tickerme.js

1/*!
2 * jQuery Tickerme Plugin v1.0
3 */
4
5(function($){
6
7  $.fn.tickerme = function(options) {
8
9    var opts = $.extend( {}, $.fn.tickerme.defaults, options );
10
11    return this.each(function(){
12
13      var ticker = $(this);
14      // SVG definitions for the play/pause/previous/next controls:
15      var control_definitions = '<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="224" height="32" viewBox="0 0 224 32"><defs><g id="icon-play"><path class="path1" d="M6 4l20 12-20 12z"></path></g><g id="icon-pause"><path class="path1" d="M4 4h10v24h-10zM18 4h10v24h-10z"></path></g><g id="icon-prev"><path class="path1" d="M18 5v10l10-10v22l-10-10v10l-11-11z"></path></g><g id="icon-next"><path class="path1" d="M16 27v-10l-10 10v-22l10 10v-10l11 11z"></path></g></defs></svg>';
16      var control_styles = '<style type="text/css">#ticker_container{width:100%}#newscontent{float:left}#news{display:none}#controls{float:right;height:16px}.icon{display:inline-block;width:16px;height:16px;fill:'+opts.control_color+'}.icon:hover{fill:'+opts.control_rollover+'}</style>';
17      // Array to contain news contents:
18      var contents = [];
19      var position = -1;
20      var timer;
21
22      init();
23
24      /* Initialise */
25
26      function init() {
27
28        // Hide all:
29        $(ticker).hide();
30
31        // Create the buttons:
32        $('body').prepend(control_definitions).prepend(control_styles);
33
34        var controls = '<div id="ticker_container">';
35        controls += '<div id="newscontent"><div id="news"></div></div>';
36        controls += '<div id="controls">';
37        controls += '<a href="#" id="pause_trigger"><i class="fa fa-pause"></i></a>';
38        controls += '<a href="#" id="play_trigger" style="display:none"><i class="fa fa-play"></i></a>';
39        //controls += '<a href="#" id="prev_trigger"><svg class="icon icon-prev" viewBox="0 0 32 32"><use xlink:href="#icon-prev"></use></svg></a>';
40        //controls += '<a href="#" id="next_trigger"><svg class="icon icon-next" viewBox="0 0 32 32"><use xlink:href="#icon-next"></use></svg></a>';
41        controls += '</div>';
42        controls += '</div>';
43        $(controls).insertAfter(ticker);
44
45        // Load up the array:
46        $(ticker).children().each(function(i){
47          contents[i] = ($(this).html());
48        });
49
50        load_container();
51      }
52
53      /* load_container */
54
55      function load_container() {
56
57        if (position == (contents.length - 1)) {
58          position = 0;
59        } else {
60          position++;
61        }
62        // Fade out the current item, replace it with the next one, and fade it in:
63        if (opts.type == 'fade') {
64          $('#news').fadeOut(opts.fade_speed,function(){
65            $('#newscontent').html('<div id="news">'+contents[position]+'</div>');
66            $('#news').fadeIn(opts.fade_speed);
67          });
68        }
69        timer = setTimeout(load_container,opts.duration);
70      }
71
72      /* Control functions */
73
74      $('a#pause_trigger').click(function() {
75        clearTimeout(timer);
76        $(this).hide();
77        $('#play_trigger').show();
78        return false;
79      });
80
81      $('a#play_trigger').click(function(){
82        load_container();
83        $(this).hide();
84        $('#pause_trigger').show();
85        return false;
86      });
87
88      $('a#prev_trigger').click(function(){
89        if (position == 0) {
90          position = (contents.length - 1);
91        } else {
92          position--;
93        }
94        $('#newscontent').html('<div id="news" style="display:block">'+contents[position]+'</div>');
95        if (opts.auto_stop) $('a#pause_trigger').trigger('click');
96        return false;
97      });
98
99      $('a#next_trigger').click(function(){
100        if (position == (contents.length - 1)) {
101          position = 0;
102        } else {
103          position++;
104        }
105        $('#newscontent').html('<div id="news" style="display:block">'+contents[position]+'</div>');
106        if (opts.auto_stop) $('a#pause_trigger').trigger('click');
107        return false;
108      });
109
110    });
111
112  };
113
114  $.fn.tickerme.defaults = {
115    fade_speed: 500,
116    duration: 4500,

117    auto_stop: true,
118    type: 'fade',
119    control_color: '#333333',
120    control_rollover: '#666666'
121  };
122
123}(jQuery));