User:Phiarc/October2011/

Features

 * Also includes images from infoboxes and such
 * Intuitive user interface
 * Small footprint (less than 1000 lines of JavaScript, small style sheet, few external images and dependencies)
 * Integrates Wikimedia Commons (if the article contains a link to a category on commons, the Slideshow will include pictures from it)
 * Features a cookie-based mechanism for storing personal preferences
 * Ability to be internationalized (all i18n-relevant strings are stored at a central site, one can easily override default markup and strings via cookies)

How to install

 * 1) Open your vector.js file (for example )
 * 2) Insert the following line of code: or, as an alternative
 * 3) Clear your browsers' cache
 * 4) Thats it! :) The script will do the rest

How to use
You're only able to invoke a slideshow on articles which actually contain images. The slideshow is invoked via the "Slideshow" link after the "Read" tab.

Keyboard shortcuts
I implemented a few shortcuts for better usability, supporting both navigation via the arrow keys or the well-known WASD keys

Settings
Click on the "Slideshow settings" link to the right side of the "My Preferences" link in your personal toolbar to open the settings. If you click the "Save" button everything will be stored as cookies with an expiration date of 10 years ahead - delete the cookies to reset everything back to the default settings. Please note, that changing the commons settings will only take effect if the slideshow hasn't been invoked yet or if the page is reloaded, as the slideshow is actually not deleted when the "Close"-Button is pressed (for perfomance reasons).

If you want to override settings that are not configurable by default, you can just set a cookie with the name of the variable prepended by "Slideshow." to basically any value that makes sense. E.g. the cookie for the variable i18n.Slideshow would be Slideshow.i18n.Slideshow.

Files

 * LICENSE (GPLv2)
 * mabe-october.js (The main script)
 * mabe-october.css (Standard stylesheet)
 * mabe-october-mobile.css (mobile stylesheet)
 * jquery.cycle.all.js (Mike Alsup's jQuery.Cycle plugin)
 * jquery.scrollTo.js (Ariel Flesler's jQuery.scrollTo plugin)
 * A few images (I cannot store images via data URIs since I do not want to break compatibility with IE6/7)
 * Left arrow
 * Right arrow
 * Close button
 * A loading animation

Slideshow Challenge: General Considerations

 * If I'm a Wikipedia reader, how do I activate a slideshow?
 * The slideshow is activated via the Slideshow button near the read button (views toolbar - In my opinion a slideshow is just another view of an article)


 * How will captions be surfaced?
 * If an image has a caption, it will be shown under the image in the slideshow


 * How will users interact with the slideshow on a tablet or a smartphone?
 * On screens smaller than 800x600 pixels the mobile mode is activated. This incorporates smaller navigation and better usage of the limited screen space.


 * How to deal with different screen resolutions?
 * On the fly resizing is fully supported


 * How do I get access to other image-related metadata, e.g. licensing information?
 * A click on the caption jumps to the image in the article, a click on the image opens the respective File: page in a new window/tab.


 * 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?
 * Those images will be displayed as well, with the only difference that a click on the caption opens a new tab/window with the category containing the image

Checklist

 * Did your code run without errors under ? (JS only)
 * Did your code break any of the unit tests? See Manual:PHP unit testing and Manual:JavaScript unit testing As far as I can tell: no
 * Have you tested all exit points from your code? Yes
 * Did you use tabs instead of spaces to indent? Yes
 * If you've created a new function, did you document the function parameters and what it returns using PHPDoc? (JS only)
 * Whitespace trailing at the end of lines is annoying, don't do that (but don't fix whitespace at the end of lines you didn't modify in the same commit, just make sure whatever you touched is good, see next point:) No trailing whitespaces as far as I can see
 * Does this commit contain any whitespace-only changes? They should be isolated to their own separate coding style-only commit. (Not commiting anything ;))
 * Have you created any identifiers that didn't use camelCase (ie. underscores)? No
 * Is every exception tested? I do not use any
 * If you have multiple return points, are they tested? Yes
 * Does each message you've created exist in MessagesEn.php and listed in maintenance/languages/messages.inc? (JS only)
 * Is each use of,  , etc. checked for errors or problems?
 * Did you use  or   flags for   to ensure Windows compatibility?
 * Have you used the proper output functions?   should almost never be used.
 * Have you used the proper termination functions?   should almost never be used.
 * Where appropriate, have you used the MediaWiki wrapper functions instead of their PHP equivalents?
 * instead of  to get boolean params
 * If you add a new test to parserTests.txt did you give it a new name?
 * Have you run ?

JavaScript / CSS

 * Tested in an actual browser? Yes
 * Compatible with IE 6.0+, FF 2.0+, Safari 3.0+, Opera 9.0+, Chrome? IE 6/7/8/9, FF7 (I guess older versions work too), Opera 9, current Chrome and Safari
 * (JavaScript) Does it validate (or did you at least run it through) JSHint ? Yes
 * (JavaScript) Are there any implied globals other than  or  ? There should not be, (not   either) None. Everything is handled inside an anonymous function
 * Is it DRY? I would say yes

__NOINDEX__