MediaWiki:Common.js

From [N8]
Revision as of 00:06, 26 May 2022 by Mr Pie 5 (talk | contribs) (Created page with "Any JavaScript here will be loaded for all users on every page load.: $(function(){ // Creates a sliding gallery (carousel), such as the one on the main page functio...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

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)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* Any JavaScript here will be loaded for all users on every page load. */

$(function(){
	
	// Creates a sliding gallery (carousel), such as the one on the main page
	function galleryRight(galleryContainer, width){
		var gallery = galleryContainer.querySelector('ul.gallery');
		gallery.scroll({
			left:parseInt(gallery.scrollLeft)+width+4,
			behavior:'smooth',
		});
	}
	function galleryLeft(galleryContainer, width){
		var gallery = galleryContainer.querySelector('ul.gallery');
		gallery.scroll({
			left:parseInt(gallery.scrollLeft)-width-4,
			behavior:'smooth',
		});
	}
	$(".sliding-gallery").each(function(gallery){
		var $buttons = $("<div></div>").addClass("sliding-gallery--buttons");
		var width = this.getElementsByTagName("img")[0].getAttribute("width");
		$("<button></button>").addClass("sliding-gallery--button right").text("🡒").on("click", galleryRight.bind(this, this, parseInt(width))).appendTo($buttons);
		$("<button></button>").addClass("sliding-gallery--button left").text("🡐").on("click", galleryLeft.bind(this, this, parseInt(width))).appendTo($buttons);
		$buttons.appendTo(this);
	});
})