User:Huawei251/MediaWiki:Gadget-gallery3-slideshow.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

// <pre>
/**
 * {{Gallery3}}幻灯片效果支持
 * 
 * @version 20200415
 * @source https://pl.wikipedia.org/wiki/MediaWiki:Common.js
 * 
 * 修改说明：
 * 1. 使用OOUI按钮
 * 2. 模板增加cycle参数，允许幻灯片循环展示
 */
$(function () {
	var toggleImage = function (group, remindex, shwindex) {
		$("#ImageGroupsGr" + group + "Im" + remindex).hide();
		$("#ImageGroupsGr" + group + "Im" + shwindex).show();
	};
	
	$('div.ImageGroup').each(function(i, group) {
		var unitnode = $('div.ImageGroupUnits', group).get(0);
		if (unitnode === undefined) {
			return 1;
		}
		var units = $(unitnode).children().children('.center');
		var count = units.get().length;
		if (count <= 1) {
			return 1;
		}
		
		var cycle = group.getAttribute('data-cycle') || false;
		
		units.each(function(j, currentimage) {
			$(currentimage).attr('id', "ImageGroupsGr" + i + "Im" + j);
			
			var leftlink = new OO.ui.ButtonWidget({
				framed: false,
				icon: 'previous',
				label: wgULS('上一个', '上一個'),
				invisibleLabel: true,
				title: wgULS('上一个', '上一個')
			});
			var rightlink = new OO.ui.ButtonWidget({
				framed: false,
				icon: 'next',
				label: wgULS('下一个', '下一個'),
				invisibleLabel: true,
				title: wgULS('下一个', '下一個')
			});
			var label = new OO.ui.ButtonWidget( {
				framed: false,
				disabled: true,
				label: (j + 1) + '/' + count
			});
			
			leftlink.on('click', function() {
				var prev = (j-1)>=0 ? (j-1) : (count-1);
				toggleImage(i, j, prev);
			});
			rightlink.on('click', function() {
				var next = (j+1)<count ? (j+1) : 0;
				toggleImage(i, j, next);
			});
			
			if (j === 0 && !cycle) { 
				leftlink.setDisabled(true);
			} else if (j === count - 1 && !cycle) {
				rightlink.setDisabled(true);
			}
			
			$('<div/>')
				.addClass('selection-box')
				.append(leftlink.$element)
				.append(label.$element)
				.append(rightlink.$element)
				.prependTo($(currentimage));
			if (j !== 0) {
				$(currentimage).hide().addClass('noprint');
			}
		});
	});
});
// </pre>