From: Ed Sanders <esanders@wikimedia.org>
Date: Tue, 12 Jul 2016 13:48:58 +0000 (+0100)
Subject: Rename 'slider' gallery mode to 'slideshow'
X-Git-Tag: 1.31.0-rc.0~6395
X-Git-Url: http://git.cyclocoop.org//%27%40script%40/%27?a=commitdiff_plain;h=af7ffaeeecd1908351863c0e928b8c5dcfb033fc;p=lhc%2Fweb%2Fwiklou.git

Rename 'slider' gallery mode to 'slideshow'

Bug: T140093
Change-Id: I6f01344b9ac61e3d2a8e7a9d920ba37786537ff8
---

diff --git a/RELEASE-NOTES-1.28 b/RELEASE-NOTES-1.28
index 697665552c..6ee962f9ff 100644
--- a/RELEASE-NOTES-1.28
+++ b/RELEASE-NOTES-1.28
@@ -19,7 +19,7 @@ production.
 
 === New features in 1.28 ===
 * User::isBot() method for checking if an account is a bot role account.
-* Added a new 'slider' mode for galleries.
+* Added a new 'slideshow' mode for galleries.
 * Added a new hook, 'UserIsBot', to aid in determining if a user is a bot.
 * Added a new hook, 'ApiMakeParserOptions', to allow extensions to better
   interact with API parsing.
diff --git a/autoload.php b/autoload.php
index 8768e9a227..d82d6993c6 100644
--- a/autoload.php
+++ b/autoload.php
@@ -1260,7 +1260,7 @@ $wgAutoloadLocalClasses = [
 	'SkinFallback' => __DIR__ . '/includes/skins/SkinFallback.php',
 	'SkinFallbackTemplate' => __DIR__ . '/includes/skins/SkinFallbackTemplate.php',
 	'SkinTemplate' => __DIR__ . '/includes/skins/SkinTemplate.php',
-	'SliderImageGallery' => __DIR__ . '/includes/gallery/SliderImageGallery.php',
+	'SlideshowImageGallery' => __DIR__ . '/includes/gallery/SlideshowImageGallery.php',
 	'SpecialActiveUsers' => __DIR__ . '/includes/specials/SpecialActiveusers.php',
 	'SpecialAllMessages' => __DIR__ . '/includes/specials/SpecialAllMessages.php',
 	'SpecialAllMyUploads' => __DIR__ . '/includes/specials/SpecialMyRedirectPages.php',
diff --git a/includes/gallery/ImageGalleryBase.php b/includes/gallery/ImageGalleryBase.php
index 73f4b19d52..6884f65626 100644
--- a/includes/gallery/ImageGalleryBase.php
+++ b/includes/gallery/ImageGalleryBase.php
@@ -113,7 +113,7 @@ abstract class ImageGalleryBase extends ContextSource {
 				'packed' => 'PackedImageGallery',
 				'packed-hover' => 'PackedHoverImageGallery',
 				'packed-overlay' => 'PackedOverlayImageGallery',
-				'slider' => 'SliderImageGallery',
+				'slideshow' => 'SlideshowImageGallery',
 			];
 			// Allow extensions to make a new gallery format.
 			Hooks::run( 'GalleryGetModes', [ &self::$modeMapping ] );
diff --git a/includes/gallery/SliderImageGallery.php b/includes/gallery/SliderImageGallery.php
deleted file mode 100644
index 67be9cea10..0000000000
--- a/includes/gallery/SliderImageGallery.php
+++ /dev/null
@@ -1,37 +0,0 @@
-<?php
-/**
- * Slider gallery shows one image at a time with controls to move around.
- *
- * This program is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation; either version 2 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License along
- * with this program; if not, write to the Free Software Foundation, Inc.,
- * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
- * http://www.gnu.org/copyleft/gpl.html
- *
- * @file
- */
-
-class SliderImageGallery extends TraditionalImageGallery {
-	function __construct( $mode = 'traditional', IContextSource $context = null ) {
-		parent::__construct( $mode, $context );
-		// Does not support per row option.
-		$this->mPerRow = 0;
-	}
-
-	/**
-	 * Add javascript adds interface elements
-	 * @return array
-	 */
-	protected function getModules() {
-		return [ 'mediawiki.page.gallery.slider' ];
-	}
-}
diff --git a/includes/gallery/SlideshowImageGallery.php b/includes/gallery/SlideshowImageGallery.php
new file mode 100644
index 0000000000..3f0c9329d0
--- /dev/null
+++ b/includes/gallery/SlideshowImageGallery.php
@@ -0,0 +1,37 @@
+<?php
+/**
+ * A slideshow gallery shows one image at a time with controls to move around.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, write to the Free Software Foundation, Inc.,
+ * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ * http://www.gnu.org/copyleft/gpl.html
+ *
+ * @file
+ */
+
+class SlideshowImageGallery extends TraditionalImageGallery {
+	function __construct( $mode = 'traditional', IContextSource $context = null ) {
+		parent::__construct( $mode, $context );
+		// Does not support per row option.
+		$this->mPerRow = 0;
+	}
+
+	/**
+	 * Add javascript adds interface elements
+	 * @return array
+	 */
+	protected function getModules() {
+		return [ 'mediawiki.page.gallery.slideshow' ];
+	}
+}
diff --git a/maintenance/jsduck/categories.json b/maintenance/jsduck/categories.json
index 631d2a7b6d..068ee8c960 100644
--- a/maintenance/jsduck/categories.json
+++ b/maintenance/jsduck/categories.json
@@ -65,7 +65,7 @@
 					"mw.Upload*",
 					"mw.ForeignUpload",
 					"mw.ForeignStructuredUpload*",
-					"mw.GallerySlider"
+					"mw.GallerySlideshow"
 				]
 			},
 			{
diff --git a/resources/Resources.php b/resources/Resources.php
index 46a9ec64dd..e35c3d76fa 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1655,8 +1655,8 @@ return [
 		'position' => 'top',
 		'targets' => [ 'desktop', 'mobile' ],
 	],
-	'mediawiki.page.gallery.slider' => [
-		'scripts' => 'resources/src/mediawiki/page/gallery-slider.js',
+	'mediawiki.page.gallery.slideshow' => [
+		'scripts' => 'resources/src/mediawiki/page/gallery-slideshow.js',
 		'position' => 'top',
 		'dependencies' => [
 			'mediawiki.api',
diff --git a/resources/src/mediawiki/page/gallery-slider.js b/resources/src/mediawiki/page/gallery-slider.js
deleted file mode 100644
index 82b22e89ad..0000000000
--- a/resources/src/mediawiki/page/gallery-slider.js
+++ /dev/null
@@ -1,453 +0,0 @@
-/*!
- * mw.GallerySlider: Interface controls for the slider gallery
- */
-( function ( mw, $, OO ) {
-	/**
-	 * mw.GallerySlider encapsulates the user interface of the slider
-	 * galleries. An object is instantiated for each `.mw-gallery-slider`
-	 * element.
-	 *
-	 * @class mw.GallerySlider
-	 * @uses mw.Title
-	 * @uses mw.Api
-	 * @param {jQuery} gallery The `<ul>` element of the gallery.
-	 */
-	mw.GallerySlider = function ( gallery ) {
-		// Properties
-		this.$gallery = $( gallery );
-		this.$galleryCaption = this.$gallery.find( '.gallerycaption' );
-		this.$galleryBox = this.$gallery.find( '.gallerybox' );
-		this.$currentImage = null;
-		this.imageInfoCache = {};
-		if ( this.$gallery.parent().attr( 'id' ) !== 'mw-content-text' ) {
-			this.$container = this.$gallery.parent();
-		}
-
-		// Initialize
-		this.drawCarousel();
-		this.setSizeRequirement();
-		this.toggleThumbnails( false );
-		this.showCurrentImage();
-
-		// Events
-		$( window ).on(
-			'resize',
-			OO.ui.debounce(
-				this.setSizeRequirement.bind( this ),
-				100
-			)
-		);
-
-		// Disable thumbnails' link, instead show the image in the carousel
-		this.$galleryBox.on( 'click', function ( e ) {
-			this.$currentImage = $( e.currentTarget );
-			this.showCurrentImage();
-			return false;
-		}.bind( this ) );
-	};
-
-	/* Properties */
-	/**
-	 * @property {jQuery} $gallery The `<ul>` element of the gallery.
-	 */
-
-	/**
-	 * @property {jQuery} $galleryCaption The `<li>` that has the gallery caption.
-	 */
-
-	/**
-	 * @property {jQuery} $galleryBox Selection of `<li>` elements that have thumbnails.
-	 */
-
-	/**
-	 * @property {jQuery} $carousel The `<li>` elements that contains the carousel.
-	 */
-
-	/**
-	 * @property {jQuery} $interface The `<div>` elements that contains the interface buttons.
-	 */
-
-	/**
-	 * @property {jQuery} $img The `<img>` element that'll display the current image.
-	 */
-
-	/**
-	 * @property {jQuery} $imgLink The `<a>` element that links to the image's File page.
-	 */
-
-	/**
-	 * @property {jQuery} $imgCaption The `<p>` element that holds the image caption.
-	 */
-
-	/**
-	 * @property {jQuery} $imgContainer The `<div>` element that contains the image.
-	 */
-
-	/**
-	 * @property {jQuery} $currentImage The `<li>` element of the current image.
-	 */
-
-	/**
-	 * @property {jQuery} $container If the gallery contained in an element that is
-	 * 	not the main content element, then it stores that element.
-	 */
-
-	/**
-	 * @property {Object} imageInfoCache A key value pair of thumbnail URLs and image info.
-	 */
-
-	/**
-	 * @property {number} imageWidth Width of the image based on viewport size
-	 */
-
-	/**
-	 * @property {number} imageHeight Height of the image based on viewport size
-	 * 	the URLs in the required size.
-	 */
-
-	/* Setup */
-	OO.initClass( mw.GallerySlider );
-
-	/* Methods */
-	/**
-	 * Draws the carousel and the interface around it.
-	 */
-	mw.GallerySlider.prototype.drawCarousel = function () {
-		var next, prev, toggle,	interfaceElements, carouselStack;
-
-		this.$carousel = $( '<li>' ).addClass( 'gallerycarousel' );
-
-		// Buttons for the interface
-		prev = new OO.ui.ButtonWidget( {
-			framed: false,
-			icon: 'previous'
-		} ).on( 'click', this.prevImage.bind( this ) );
-
-		next = new OO.ui.ButtonWidget( {
-			framed: false,
-			icon: 'next'
-		} ).on( 'click', this.nextImage.bind( this ) );
-
-		toggle = new OO.ui.ButtonWidget( {
-			framed: false,
-			icon: 'imageGallery'
-		} ).on( 'click', this.toggleThumbnails.bind( this ) );
-
-		interfaceElements = new OO.ui.PanelLayout( {
-			expanded: false,
-			classes: [ 'mw-gallery-slider-buttons' ],
-			$content: $( '<div>' ).append(
-				prev.$element,
-				toggle.$element,
-				next.$element
-			)
-		} );
-		this.$interface = interfaceElements.$element;
-
-		// Containers for the current image, caption etc.
-		this.$img = $( '<img>' );
-		this.$imgLink = $( '<a>' ).append( this.$img );
-		this.$imgCaption = $( '<p>' ).attr( 'class', 'mw-gallery-slider-caption' );
-		this.$imgContainer = $( '<div>' )
-			.attr( 'class', 'mw-gallery-slider-img-container' )
-			.append( this.$imgLink );
-
-		carouselStack = new OO.ui.StackLayout( {
-			continuous: true,
-			expanded: false,
-			items: [
-				interfaceElements,
-				new OO.ui.PanelLayout( {
-					expanded: false,
-					$content: this.$imgContainer
-				} ),
-				new OO.ui.PanelLayout( {
-					expanded: false,
-					$content: this.$imgCaption
-				} )
-			]
-		} );
-		this.$carousel.append( carouselStack.$element );
-
-		// Append below the caption or as the first element in the gallery
-		if ( this.$galleryCaption.length !== 0 ) {
-			this.$galleryCaption.after( this.$carousel );
-		} else {
-			this.$gallery.prepend( this.$carousel );
-		}
-	};
-
-	/**
-	 * Sets the {@link #imageWidth} and {@link #imageHeight} properties
-	 * based on the size of the window. Also flushes the
-	 * {@link #imageInfoCache} as we'll now need URLs for a different
-	 * size.
-	 */
-	mw.GallerySlider.prototype.setSizeRequirement = function () {
-		var w, h;
-
-		if ( this.$container !== undefined ) {
-			w = this.$container.width() * 0.9;
-			h = ( this.$container.height() - this.getChromeHeight() ) * 0.9;
-		} else {
-			w = this.$imgContainer.width();
-			h = Math.min( $( window ).height() * ( 3 / 4 ), this.$imgContainer.width() ) - this.getChromeHeight();
-		}
-
-		// Only update and flush the cache if the size changed
-		if ( w !== this.imageWidth || h !== this.imageHeight ) {
-			this.imageWidth = w;
-			this.imageHeight = h;
-			this.imageInfoCache = {};
-			this.setImageSize();
-		}
-	};
-
-	/**
-	 * Gets the height of the interface elements and the
-	 * gallery's caption.
-	 */
-	mw.GallerySlider.prototype.getChromeHeight = function () {
-		return this.$interface.outerHeight() + this.$galleryCaption.outerHeight();
-	};
-
-	/**
-	 * Sets the height and width of {@link #$img} based on the
-	 * proportion of the image and the values generated by
-	 * {@link #setSizeRequirement}.
-	 *
-	 * @return {boolean} Whether or not the image was sized.
-	 */
-	mw.GallerySlider.prototype.setImageSize = function () {
-		if ( this.$img === undefined || this.$thumbnail === undefined ) {
-			return false;
-		}
-
-		// Reset height and width
-		this.$img
-			.removeAttr( 'width' )
-			.removeAttr( 'height' );
-
-		// Stretch image to take up the required size
-		if ( this.$thumbnail.width() > this.$thumbnail.height() ) {
-			this.$img.attr( 'width', this.imageWidth + 'px' );
-		} else {
-			this.$img.attr( 'height', this.imageHeight + 'px' );
-		}
-
-		// Make the image smaller in case the current image
-		// size is larger than the original file size.
-		this.getImageInfo( this.$thumbnail ).done( function ( info ) {
-			// NOTE: There will be a jump when resizing the window
-			// because the cache is cleared and this a new network request.
-			if (
-				info.thumbwidth < this.$img.width() ||
-				info.thumbheight < this.$img.height()
-			) {
-				this.$img.attr( 'width', info.thumbwidth + 'px' );
-				this.$img.attr( 'height', info.thumbheight + 'px' );
-			}
-		}.bind( this ) );
-
-		return true;
-	};
-
-	/**
-	 * Displays the image set as {@link #$currentImage} in the carousel.
-	 */
-	mw.GallerySlider.prototype.showCurrentImage = function () {
-		var imageLi = this.getCurrentImage(),
-			caption = imageLi.find( '.gallerytext' );
-
-		// Highlight current thumbnail
-		this.$gallery
-			.find( '.gallerybox.slider-current' )
-			.removeClass( 'slider-current' );
-		imageLi.addClass( 'slider-current' );
-
-		// Show thumbnail stretched to the right size while the image loads
-		this.$thumbnail = imageLi.find( 'img' );
-		this.$img.attr( 'src', this.$thumbnail.attr( 'src' ) );
-		this.$imgLink.attr( 'href', imageLi.find( 'a' ).eq( 0 ).attr( 'href' ) );
-		this.setImageSize();
-
-		// Copy caption
-		this.$imgCaption
-			.empty()
-			.append( caption.clone() );
-
-		// Load image at the required size
-		this.loadImage( this.$thumbnail ).done( function ( info, $img ) {
-			// Show this image to the user only if its still the current one
-			if ( this.$thumbnail.attr( 'src' ) === $img.attr( 'src' ) ) {
-				this.$img.attr( 'src', info.thumburl );
-				this.setImageSize();
-
-				// Keep the next image ready
-				this.loadImage( this.getNextImage().find( 'img' ) );
-			}
-		}.bind( this ) );
-	};
-
-	/**
-	 * Loads the full image given the `<img>` element of the thumbnail.
-	 *
-	 * @param {Object} $img
-	 * @return {jQuery.Promise} Resolves with the images URL and original
-	 *	element once the image has loaded.
-	 */
-	mw.GallerySlider.prototype.loadImage = function ( $img ) {
-		var img, d = $.Deferred();
-
-		this.getImageInfo( $img ).done( function ( info ) {
-			img = new Image();
-			img.src = info.thumburl;
-			img.onload = function () {
-				d.resolve( info, $img );
-			};
-			img.onerror = function () {
-				d.reject();
-			};
-		} ).fail( function () {
-			d.reject();
-		} );
-
-		return d.promise();
-	};
-
-	/**
-	 * Gets the image's info given an `<img>` element.
-	 *
-	 * @param {Object} $img
-	 * @return {jQuery.Promise} Resolves with the image's info.
-	 */
-	mw.GallerySlider.prototype.getImageInfo = function ( $img ) {
-		var api, title, params,
-			imageSrc = $img.attr( 'src' );
-
-		if ( this.imageInfoCache[ imageSrc ] === undefined ) {
-			api = new mw.Api();
-			// TODO: This supports only gallery of images
-			title = new mw.Title.newFromImg( $img );
-			params = {
-				action: 'query',
-				formatversion: 2,
-				titles: title.toString(),
-				prop: 'imageinfo',
-				iiprop: 'url'
-			};
-
-			// Check which dimension we need to request, based on
-			// image and container proportions.
-			if ( this.getDimensionToRequest( $img ) === 'height' ) {
-				params.iiurlheight = this.imageHeight;
-			} else {
-				params.iiurlwidth = this.imageWidth;
-			}
-
-			this.imageInfoCache[ imageSrc ] = api.get( params ).then( function ( data ) {
-				if ( OO.getProp( data, 'query', 'pages', 0, 'imageinfo', 0, 'thumburl' ) !== undefined ) {
-					return data.query.pages[ 0 ].imageinfo[ 0 ];
-				} else {
-					return $.Deferred().reject();
-				}
-			} );
-		}
-
-		return this.imageInfoCache[ imageSrc ];
-	};
-
-	/**
-	 * Given an image, the method checks whether to use the height
-	 * or the width to request the larger image.
-	 *
-	 * @param {jQuery} $img
-	 * @return {string}
-	 */
-	mw.GallerySlider.prototype.getDimensionToRequest = function ( $img ) {
-		var ratio = $img.width() / $img.height();
-
-		if ( this.imageHeight * ratio <= this.imageWidth ) {
-			return 'height';
-		} else {
-			return 'width';
-		}
-	};
-
-	/**
-	 * Toggles visibility of the thumbnails.
-	 *
-	 * @param {boolean} show Optional argument to control the state
-	 */
-	mw.GallerySlider.prototype.toggleThumbnails = function ( show ) {
-		this.$galleryBox.toggle( show );
-		this.$carousel.toggleClass( 'mw-gallery-slider-thumbnails-toggled', show );
-	};
-
-	/**
-	 * Getter method for {@link #$currentImage}
-	 *
-	 * @return {jQuery}
-	 */
-	mw.GallerySlider.prototype.getCurrentImage = function () {
-		this.$currentImage = this.$currentImage || this.$galleryBox.eq( 0 );
-		return this.$currentImage;
-	};
-
-	/**
-	 * Gets the image after the current one. Returns the first image if
-	 * the current one is the last.
-	 *
-	 * @return {jQuery}
-	 */
-	mw.GallerySlider.prototype.getNextImage = function () {
-		// Not the last image in the gallery
-		if ( this.$currentImage.next( '.gallerybox' )[ 0 ] !== undefined ) {
-			return this.$currentImage.next( '.gallerybox' );
-		} else {
-			return this.$galleryBox.eq( 0 );
-		}
-	};
-
-	/**
-	 * Gets the image before the current one. Returns the last image if
-	 * the current one is the first.
-	 *
-	 * @return {jQuery}
-	 */
-	mw.GallerySlider.prototype.getPrevImage = function () {
-		// Not the first image in the gallery
-		if ( this.$currentImage.prev( '.gallerybox' )[ 0 ] !== undefined ) {
-			return this.$currentImage.prev( '.gallerybox' );
-		} else {
-			return this.$galleryBox.last();
-		}
-	};
-
-	/**
-	 * Sets the {@link #$currentImage} to the next one and shows
-	 * it in the carousel
-	 */
-	mw.GallerySlider.prototype.nextImage = function () {
-		this.$currentImage = this.getNextImage();
-		this.showCurrentImage();
-	};
-
-	/**
-	 * Sets the {@link #$currentImage} to the previous one and shows
-	 * it in the carousel
-	 */
-	mw.GallerySlider.prototype.prevImage = function () {
-		this.$currentImage = this.getPrevImage();
-		this.showCurrentImage();
-	};
-
-	// Bootstrap all slider galleries
-	$( function () {
-		$( '.mw-gallery-slider' ).each( function () {
-			/*jshint -W031 */
-			new mw.GallerySlider( this );
-			/*jshint +W031 */
-		} );
-	} );
-}( mediaWiki, jQuery, OO ) );
diff --git a/resources/src/mediawiki/page/gallery-slideshow.js b/resources/src/mediawiki/page/gallery-slideshow.js
new file mode 100644
index 0000000000..85ded4443e
--- /dev/null
+++ b/resources/src/mediawiki/page/gallery-slideshow.js
@@ -0,0 +1,453 @@
+/*!
+ * mw.GallerySlideshow: Interface controls for the slideshow gallery
+ */
+( function ( mw, $, OO ) {
+	/**
+	 * mw.GallerySlideshow encapsulates the user interface of the slideshow
+	 * galleries. An object is instantiated for each `.mw-gallery-slideshow`
+	 * element.
+	 *
+	 * @class mw.GallerySlideshow
+	 * @uses mw.Title
+	 * @uses mw.Api
+	 * @param {jQuery} gallery The `<ul>` element of the gallery.
+	 */
+	mw.GallerySlideshow = function ( gallery ) {
+		// Properties
+		this.$gallery = $( gallery );
+		this.$galleryCaption = this.$gallery.find( '.gallerycaption' );
+		this.$galleryBox = this.$gallery.find( '.gallerybox' );
+		this.$currentImage = null;
+		this.imageInfoCache = {};
+		if ( this.$gallery.parent().attr( 'id' ) !== 'mw-content-text' ) {
+			this.$container = this.$gallery.parent();
+		}
+
+		// Initialize
+		this.drawCarousel();
+		this.setSizeRequirement();
+		this.toggleThumbnails( false );
+		this.showCurrentImage();
+
+		// Events
+		$( window ).on(
+			'resize',
+			OO.ui.debounce(
+				this.setSizeRequirement.bind( this ),
+				100
+			)
+		);
+
+		// Disable thumbnails' link, instead show the image in the carousel
+		this.$galleryBox.on( 'click', function ( e ) {
+			this.$currentImage = $( e.currentTarget );
+			this.showCurrentImage();
+			return false;
+		}.bind( this ) );
+	};
+
+	/* Properties */
+	/**
+	 * @property {jQuery} $gallery The `<ul>` element of the gallery.
+	 */
+
+	/**
+	 * @property {jQuery} $galleryCaption The `<li>` that has the gallery caption.
+	 */
+
+	/**
+	 * @property {jQuery} $galleryBox Selection of `<li>` elements that have thumbnails.
+	 */
+
+	/**
+	 * @property {jQuery} $carousel The `<li>` elements that contains the carousel.
+	 */
+
+	/**
+	 * @property {jQuery} $interface The `<div>` elements that contains the interface buttons.
+	 */
+
+	/**
+	 * @property {jQuery} $img The `<img>` element that'll display the current image.
+	 */
+
+	/**
+	 * @property {jQuery} $imgLink The `<a>` element that links to the image's File page.
+	 */
+
+	/**
+	 * @property {jQuery} $imgCaption The `<p>` element that holds the image caption.
+	 */
+
+	/**
+	 * @property {jQuery} $imgContainer The `<div>` element that contains the image.
+	 */
+
+	/**
+	 * @property {jQuery} $currentImage The `<li>` element of the current image.
+	 */
+
+	/**
+	 * @property {jQuery} $container If the gallery contained in an element that is
+	 * 	not the main content element, then it stores that element.
+	 */
+
+	/**
+	 * @property {Object} imageInfoCache A key value pair of thumbnail URLs and image info.
+	 */
+
+	/**
+	 * @property {number} imageWidth Width of the image based on viewport size
+	 */
+
+	/**
+	 * @property {number} imageHeight Height of the image based on viewport size
+	 * 	the URLs in the required size.
+	 */
+
+	/* Setup */
+	OO.initClass( mw.GallerySlideshow );
+
+	/* Methods */
+	/**
+	 * Draws the carousel and the interface around it.
+	 */
+	mw.GallerySlideshow.prototype.drawCarousel = function () {
+		var next, prev, toggle,	interfaceElements, carouselStack;
+
+		this.$carousel = $( '<li>' ).addClass( 'gallerycarousel' );
+
+		// Buttons for the interface
+		prev = new OO.ui.ButtonWidget( {
+			framed: false,
+			icon: 'previous'
+		} ).on( 'click', this.prevImage.bind( this ) );
+
+		next = new OO.ui.ButtonWidget( {
+			framed: false,
+			icon: 'next'
+		} ).on( 'click', this.nextImage.bind( this ) );
+
+		toggle = new OO.ui.ButtonWidget( {
+			framed: false,
+			icon: 'imageGallery'
+		} ).on( 'click', this.toggleThumbnails.bind( this ) );
+
+		interfaceElements = new OO.ui.PanelLayout( {
+			expanded: false,
+			classes: [ 'mw-gallery-slideshow-buttons' ],
+			$content: $( '<div>' ).append(
+				prev.$element,
+				toggle.$element,
+				next.$element
+			)
+		} );
+		this.$interface = interfaceElements.$element;
+
+		// Containers for the current image, caption etc.
+		this.$img = $( '<img>' );
+		this.$imgLink = $( '<a>' ).append( this.$img );
+		this.$imgCaption = $( '<p>' ).attr( 'class', 'mw-gallery-slideshow-caption' );
+		this.$imgContainer = $( '<div>' )
+			.attr( 'class', 'mw-gallery-slideshow-img-container' )
+			.append( this.$imgLink );
+
+		carouselStack = new OO.ui.StackLayout( {
+			continuous: true,
+			expanded: false,
+			items: [
+				interfaceElements,
+				new OO.ui.PanelLayout( {
+					expanded: false,
+					$content: this.$imgContainer
+				} ),
+				new OO.ui.PanelLayout( {
+					expanded: false,
+					$content: this.$imgCaption
+				} )
+			]
+		} );
+		this.$carousel.append( carouselStack.$element );
+
+		// Append below the caption or as the first element in the gallery
+		if ( this.$galleryCaption.length !== 0 ) {
+			this.$galleryCaption.after( this.$carousel );
+		} else {
+			this.$gallery.prepend( this.$carousel );
+		}
+	};
+
+	/**
+	 * Sets the {@link #imageWidth} and {@link #imageHeight} properties
+	 * based on the size of the window. Also flushes the
+	 * {@link #imageInfoCache} as we'll now need URLs for a different
+	 * size.
+	 */
+	mw.GallerySlideshow.prototype.setSizeRequirement = function () {
+		var w, h;
+
+		if ( this.$container !== undefined ) {
+			w = this.$container.width() * 0.9;
+			h = ( this.$container.height() - this.getChromeHeight() ) * 0.9;
+		} else {
+			w = this.$imgContainer.width();
+			h = Math.min( $( window ).height() * ( 3 / 4 ), this.$imgContainer.width() ) - this.getChromeHeight();
+		}
+
+		// Only update and flush the cache if the size changed
+		if ( w !== this.imageWidth || h !== this.imageHeight ) {
+			this.imageWidth = w;
+			this.imageHeight = h;
+			this.imageInfoCache = {};
+			this.setImageSize();
+		}
+	};
+
+	/**
+	 * Gets the height of the interface elements and the
+	 * gallery's caption.
+	 */
+	mw.GallerySlideshow.prototype.getChromeHeight = function () {
+		return this.$interface.outerHeight() + this.$galleryCaption.outerHeight();
+	};
+
+	/**
+	 * Sets the height and width of {@link #$img} based on the
+	 * proportion of the image and the values generated by
+	 * {@link #setSizeRequirement}.
+	 *
+	 * @return {boolean} Whether or not the image was sized.
+	 */
+	mw.GallerySlideshow.prototype.setImageSize = function () {
+		if ( this.$img === undefined || this.$thumbnail === undefined ) {
+			return false;
+		}
+
+		// Reset height and width
+		this.$img
+			.removeAttr( 'width' )
+			.removeAttr( 'height' );
+
+		// Stretch image to take up the required size
+		if ( this.$thumbnail.width() > this.$thumbnail.height() ) {
+			this.$img.attr( 'width', this.imageWidth + 'px' );
+		} else {
+			this.$img.attr( 'height', this.imageHeight + 'px' );
+		}
+
+		// Make the image smaller in case the current image
+		// size is larger than the original file size.
+		this.getImageInfo( this.$thumbnail ).done( function ( info ) {
+			// NOTE: There will be a jump when resizing the window
+			// because the cache is cleared and this a new network request.
+			if (
+				info.thumbwidth < this.$img.width() ||
+				info.thumbheight < this.$img.height()
+			) {
+				this.$img.attr( 'width', info.thumbwidth + 'px' );
+				this.$img.attr( 'height', info.thumbheight + 'px' );
+			}
+		}.bind( this ) );
+
+		return true;
+	};
+
+	/**
+	 * Displays the image set as {@link #$currentImage} in the carousel.
+	 */
+	mw.GallerySlideshow.prototype.showCurrentImage = function () {
+		var imageLi = this.getCurrentImage(),
+			caption = imageLi.find( '.gallerytext' );
+
+		// Highlight current thumbnail
+		this.$gallery
+			.find( '.gallerybox.slideshow-current' )
+			.removeClass( 'slideshow-current' );
+		imageLi.addClass( 'slideshow-current' );
+
+		// Show thumbnail stretched to the right size while the image loads
+		this.$thumbnail = imageLi.find( 'img' );
+		this.$img.attr( 'src', this.$thumbnail.attr( 'src' ) );
+		this.$imgLink.attr( 'href', imageLi.find( 'a' ).eq( 0 ).attr( 'href' ) );
+		this.setImageSize();
+
+		// Copy caption
+		this.$imgCaption
+			.empty()
+			.append( caption.clone() );
+
+		// Load image at the required size
+		this.loadImage( this.$thumbnail ).done( function ( info, $img ) {
+			// Show this image to the user only if its still the current one
+			if ( this.$thumbnail.attr( 'src' ) === $img.attr( 'src' ) ) {
+				this.$img.attr( 'src', info.thumburl );
+				this.setImageSize();
+
+				// Keep the next image ready
+				this.loadImage( this.getNextImage().find( 'img' ) );
+			}
+		}.bind( this ) );
+	};
+
+	/**
+	 * Loads the full image given the `<img>` element of the thumbnail.
+	 *
+	 * @param {Object} $img
+	 * @return {jQuery.Promise} Resolves with the images URL and original
+	 *	element once the image has loaded.
+	 */
+	mw.GallerySlideshow.prototype.loadImage = function ( $img ) {
+		var img, d = $.Deferred();
+
+		this.getImageInfo( $img ).done( function ( info ) {
+			img = new Image();
+			img.src = info.thumburl;
+			img.onload = function () {
+				d.resolve( info, $img );
+			};
+			img.onerror = function () {
+				d.reject();
+			};
+		} ).fail( function () {
+			d.reject();
+		} );
+
+		return d.promise();
+	};
+
+	/**
+	 * Gets the image's info given an `<img>` element.
+	 *
+	 * @param {Object} $img
+	 * @return {jQuery.Promise} Resolves with the image's info.
+	 */
+	mw.GallerySlideshow.prototype.getImageInfo = function ( $img ) {
+		var api, title, params,
+			imageSrc = $img.attr( 'src' );
+
+		if ( this.imageInfoCache[ imageSrc ] === undefined ) {
+			api = new mw.Api();
+			// TODO: This supports only gallery of images
+			title = new mw.Title.newFromImg( $img );
+			params = {
+				action: 'query',
+				formatversion: 2,
+				titles: title.toString(),
+				prop: 'imageinfo',
+				iiprop: 'url'
+			};
+
+			// Check which dimension we need to request, based on
+			// image and container proportions.
+			if ( this.getDimensionToRequest( $img ) === 'height' ) {
+				params.iiurlheight = this.imageHeight;
+			} else {
+				params.iiurlwidth = this.imageWidth;
+			}
+
+			this.imageInfoCache[ imageSrc ] = api.get( params ).then( function ( data ) {
+				if ( OO.getProp( data, 'query', 'pages', 0, 'imageinfo', 0, 'thumburl' ) !== undefined ) {
+					return data.query.pages[ 0 ].imageinfo[ 0 ];
+				} else {
+					return $.Deferred().reject();
+				}
+			} );
+		}
+
+		return this.imageInfoCache[ imageSrc ];
+	};
+
+	/**
+	 * Given an image, the method checks whether to use the height
+	 * or the width to request the larger image.
+	 *
+	 * @param {jQuery} $img
+	 * @return {string}
+	 */
+	mw.GallerySlideshow.prototype.getDimensionToRequest = function ( $img ) {
+		var ratio = $img.width() / $img.height();
+
+		if ( this.imageHeight * ratio <= this.imageWidth ) {
+			return 'height';
+		} else {
+			return 'width';
+		}
+	};
+
+	/**
+	 * Toggles visibility of the thumbnails.
+	 *
+	 * @param {boolean} show Optional argument to control the state
+	 */
+	mw.GallerySlideshow.prototype.toggleThumbnails = function ( show ) {
+		this.$galleryBox.toggle( show );
+		this.$carousel.toggleClass( 'mw-gallery-slideshow-thumbnails-toggled', show );
+	};
+
+	/**
+	 * Getter method for {@link #$currentImage}
+	 *
+	 * @return {jQuery}
+	 */
+	mw.GallerySlideshow.prototype.getCurrentImage = function () {
+		this.$currentImage = this.$currentImage || this.$galleryBox.eq( 0 );
+		return this.$currentImage;
+	};
+
+	/**
+	 * Gets the image after the current one. Returns the first image if
+	 * the current one is the last.
+	 *
+	 * @return {jQuery}
+	 */
+	mw.GallerySlideshow.prototype.getNextImage = function () {
+		// Not the last image in the gallery
+		if ( this.$currentImage.next( '.gallerybox' )[ 0 ] !== undefined ) {
+			return this.$currentImage.next( '.gallerybox' );
+		} else {
+			return this.$galleryBox.eq( 0 );
+		}
+	};
+
+	/**
+	 * Gets the image before the current one. Returns the last image if
+	 * the current one is the first.
+	 *
+	 * @return {jQuery}
+	 */
+	mw.GallerySlideshow.prototype.getPrevImage = function () {
+		// Not the first image in the gallery
+		if ( this.$currentImage.prev( '.gallerybox' )[ 0 ] !== undefined ) {
+			return this.$currentImage.prev( '.gallerybox' );
+		} else {
+			return this.$galleryBox.last();
+		}
+	};
+
+	/**
+	 * Sets the {@link #$currentImage} to the next one and shows
+	 * it in the carousel
+	 */
+	mw.GallerySlideshow.prototype.nextImage = function () {
+		this.$currentImage = this.getNextImage();
+		this.showCurrentImage();
+	};
+
+	/**
+	 * Sets the {@link #$currentImage} to the previous one and shows
+	 * it in the carousel
+	 */
+	mw.GallerySlideshow.prototype.prevImage = function () {
+		this.$currentImage = this.getPrevImage();
+		this.showCurrentImage();
+	};
+
+	// Bootstrap all slideshow galleries
+	$( function () {
+		$( '.mw-gallery-slideshow' ).each( function () {
+			/*jshint -W031 */
+			new mw.GallerySlideshow( this );
+			/*jshint +W031 */
+		} );
+	} );
+}( mediaWiki, jQuery, OO ) );
diff --git a/resources/src/mediawiki/page/gallery.css b/resources/src/mediawiki/page/gallery.css
index 7bf0f81137..26463fd18c 100644
--- a/resources/src/mediawiki/page/gallery.css
+++ b/resources/src/mediawiki/page/gallery.css
@@ -125,48 +125,48 @@ ul.mw-gallery-packed {
 	text-align: center;
 }
 
-/* Slider */
-ul.gallery.mw-gallery-slider {
+/* Slideshow */
+ul.gallery.mw-gallery-slideshow {
 	display: block;
 	margin: 4em 0;
 }
 
-ul.gallery.mw-gallery-slider .gallerycaption {
+ul.gallery.mw-gallery-slideshow .gallerycaption {
 	font-size: 1.3em;
 	margin: 0;
 }
 
-ul.gallery.mw-gallery-slider .gallerycarousel.mw-gallery-slider-thumbnails-toggled {
+ul.gallery.mw-gallery-slideshow .gallerycarousel.mw-gallery-slideshow-thumbnails-toggled {
 	margin-bottom: 1.3em;
 }
 
-ul.gallery.mw-gallery-slider .mw-gallery-slider-buttons {
+ul.gallery.mw-gallery-slideshow .mw-gallery-slideshow-buttons {
 	opacity: 0.5;
 	padding: 1.3em 0;
 }
 
-ul.gallery.mw-gallery-slider .mw-gallery-slider-buttons .oo-ui-buttonElement {
+ul.gallery.mw-gallery-slideshow .mw-gallery-slideshow-buttons .oo-ui-buttonElement {
 	margin: 0 2em;
 }
 
-.mw-gallery-slider li.gallerybox.slider-current {
+.mw-gallery-slideshow li.gallerybox.slideshow-current {
 	background: #efefef;
 }
 
-.mw-gallery-slider .gallerybox > div {
+.mw-gallery-slideshow .gallerybox > div {
 	max-width: 120px;
 }
 
-ul.mw-gallery-slider li.gallerybox div.thumb {
+ul.mw-gallery-slideshow li.gallerybox div.thumb {
 	border: none;
 	background: transparent;
 }
 
-ul.mw-gallery-slider li.gallerycarousel {
+ul.mw-gallery-slideshow li.gallerycarousel {
 	display: block;
 	text-align: center;
 }
 
-.mw-gallery-slider-img-container a {
+.mw-gallery-slideshow-img-container a {
 	display: block;
 }
\ No newline at end of file