User:Magnus Manske/wikipic

My submission for the October 2011 Coding Challenge/Wikipedia Slideshow.

How to use wikipic
Edit your common.js subpage and add the following line: importScriptURI("//www.mediawiki.org/w/index.php?title=User:Magnus_Manske/wikipic.js&action=raw&ctype=text/javascript"); If you use a JavaScript blocker such as NoScript, make sure it allows scripts from www.wikimedia.org.

Functions
wikipic can be used on Wikipedia, Wikibooks, and other Wikimedia projects. It adds a "tab" to each image in an article, which appears when you hover over the image with the mouse:

wikipic comes with four functions, though there is always room for more in the tab.

File information
The file information button opens a dialog box with a zoomed version of the file, and meta-data such as size, description, author, date, license(s), and categories. Some of these are linked to relevant pages that will open in a new window/tab. The ides is that one can see information about the file without having to leave the page, and follow up while keeping the "source page" state. The images is by default shown on a black background for enhanced contrast. Clicking on the background toggles between black and white.

Related files
This function loads up to ~120 related images as thumbnails into a dialog box. The files are found by looking at categories and galleries (both on the local wiki and on Commons, if applicable) that contain the original image (the one with the tab), of the same file type. If this yields only few results, images from pages on the local wiki related to the current page via in- and outgoing links are investigated. The aim is to try to stay "in context", but at the same time to emphasize the variety and vast numbers of images on Wikimedia projects. The thumbnails are rather small, to pack a large number of them into view. However, they are loaded in a larger size than displayed; hovering over one of the small thumbnails shows the "full", larger thumbnail, with file name and size. Clicking on the large thumbnail leads to the respective file description page in a new tab/window.

Slideshow
For a slideshow, up to 50 files are retrieved in the same way as the "related files" search. These are then shown in a dialog box, similar to the "file information" dialog, but with auto-forward every 4 seconds, and pause/play/last/next/first/last buttons for manual control. Clicking on the image, the buttons, or the links will automatically pause the slideshow before performing the required function.

Full-screen slideshow
The Full-screen slideshow is identical to the "normal" slideshow, except it uses the entire browser window, and does not show image meta-data. Return to the normal browser window via the escape key.

Properties

 * Protocol-neutral (automatically uses http or https depending on the protocol used to load the page)
 * Works transparently with both local and Commons images
 * Completely written in JavaScript/CSS, using the Wiki(m|p)edia API; no extension necessary
 * Extensive use of jQuery maintains cross-browser compatability (even works on IE8!)
 * Tablet compatible: touch an image but release outside the image (so to not "click" on it) will show/hide the tab; the same gesture will show the larger thumbnail in "related files" (tested on Motorola Xoom/Android 3.X)
 * i18n build-in (currently en and de)
 * Many parameters adjustable at the head of the object definition
 * Related images are discovered trhough various methods, sorted by occurrences ("most related" first), then randomized within the sort order; this ensures that relevant images are shown first, while keeping variety through randomization
 * Attempts to parse metadata from Information and related templates. Detects license categories and displays appropriate icons where available.

Cross-browser

 * Mac : Firefox 8 OK, Safari 5.1 OK, Opera 11.5 OK, Google Chrome 17 OK
 * Windows XP : IE 8 OK
 * Android 3.X : Firefox OK, Google Chrome OK (both need "escape" button for full-screen mode)

Known issues

 * In "related images", sometimes the thumbnails appear to "stall" loading for a few seconds; this is not an issue with wikipic, but with the server-side thumbnail generation, even though I try to use "standard" thumbnail sizes that should mostly exist
 * Not tested for video/audio.
 * Rarely, slideshow stops altogether. Some minor bug, no time to find it...

Code
I hereby release the wikipic code under GPLv.2.0+. JavaScript and CSS file are all that's required.