https://jc.jo/Scripts/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:right;color:#fff;}#news{display:none}#controls{float:left;height:16px}.icons{display:inline-block;width:16px;height:16px;color:'+opts.control_colour+'}.icons:hover{color:'+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="next_trigger"><img src="/App_Themes/ThemeAr/Images/newsprev.png"></i></a>';
38				// controls += '<a href="#" id="pause_trigger"><i class="fas fa-pause icons mx-2"></i></a>';
39				// controls += '<a href="#" id="play_trigger" style="display:none"><i class="fas fa-play icons mx-2"></i></a>';
40				controls += '<a href="#" id="prev_trigger"><img src="/App_Themes/ThemeAr/Images/nextnew.png"></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: 4000,
117		auto_stop: false,
118		type: 'fade',
119		control_colour: '#aaa',
120		control_rollover: '#fff'
121	};
122
123}(jQuery));