October 2011 Coding Challenge/Slideshow



= Slideshow Challenge =

How can we bring the millions of pictures in Wikipedia to our readers beyond the current low resolution thumbnails in articles? Find a way to invoke a beautiful, interactive HTML5 slideshow that works well on the desktop (extra points for tablet or mobile implementations), from any Wikipedia article.

Most readers only ever encounter the thumbnail view of images in a Wikipedia article. To see the full-size version, you have to manually click through, after which you end up on a page like. Not bad, but not particularly user-friendly either. Wouldn't it be nice to have a beautiful slideshow with captions that can be invoked right from the article?

On Wikimedia Commons, our media repository, people have gone through some effort to showcase our best images. If you're logged into commons, check out the user preferences and activate the "Slideshow" gadget. This is a community-created JavaScript that you can use as a benchmark for your own development; the code can be found in MediaWiki:GallerySlideshow.js and MediaWiki:Gadget-GallerySlideshow.js. When activated, it adds a "Show slideshow" link to categories like this one.

Your slideshow implementation should work beautifully without browser plug-ins.

Things to think about:
 * If I'm a Wikipedia reader, how do I activate a slideshow?
 * How will captions be surfaced?
 * How will users interact with the slideshow on a tablet or a smartphone?
 * How to deal with different screen resolutions?
 * How do I get access to other image-related metadata, e.g. licensing information?
 * If a Wikipedia article links to related images on Wikimedia Commons (e.g. through Template:Commons or Template:Commons category), how can those be surfaced in the slideshow?

User Scripts
All pages on MediaWiki sites include some built-in MediaWiki JavaScript code. Users can add their own code to this preload process by writing and uploading User Scripts, which are loaded whenever that logged-in user loads a page. Here's a brief guide explaining how those User Scripts work. Using that guide, you should be ready to have your own JavaScript code that's local to your login up and running within half an hour or less.

Image scaling
All Wikimedia Foundation sites depend on image scalers for supported media formats. This is an example of a full image URL. This is an example of a scaled image URL.