User:Magnus Manske/wikipic

My submission for the slideshow challenge.

Rationale

The challenge asks "How can we bring the millions of pictures in Wikipedia to our readers beyond the current low resolution thumbnails in articles?". This does not refer to the images in an article (of which there are often few), but to the whole of Wikipedia and Commons. However, a user will likely not be satisfied with viewing random images, but presumably would like to see "more like this". Therefore, this script attempts to find images related to one selected by the user, through categories, gallery pages, and linked/backlinked pages.

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:

Hover tab in Opera 11.5

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.

File information dialog in Internet Explorer 8

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.

Related files dialig in Google Chrome 16

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.

Slideshow dialog in Firefox 8

Note: this function has been deactivated in the current version (the icon will start the fullscreen mode instead), but is still available (slideshow_fullscreen_only=false).

Full-screen slideshow

The Full-screen slideshow is identical to the "normal" slideshow, except it uses the entire browser window. Image metadata can be dismissed. Some controls will fade out but reappear once the mouse is moved. Return to the normal browser window via the escape key or the close button in the bottom-right corner.

Full-screen slideshow in Firefox 8

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.