Help:Sliders

In use by RRabbit42

Sliders are sets of four pictures that are displayed in sequence, where the next picture "slides" in place of the previous one. Each picture is accompanied by a thumbnail, picture title, caption and a button that will take you a page related to the picture.

Two types of sliders are available, Command sliders and Gallery sliders. Gallery slideshows are similar, but display the series of pictures differently.

Command sliders
Command sliders are invoked with the   command. The "name" portion of the command is a MediaWiki: page that contains the data to display the slider. The MediaWiki page may be named as desired. MediaWiki:Slider is a common choice but is not required. Other names such as MediaWiki:Bananas or MediaWiki:FavoriteRaceHorses also work, and the code to use the former would read as follows:   

Names already in use as System messages may not be used. Names may not have spaces in them.

Since a MediaWiki page is only editable by Administrators, Command sliders can only be created by Administrators. Users can only display an already-made Command slider but not create their own, so using a Gallery slider or a Gallery slideshow will work better for most users.

Construction
The MediaWiki page is constructed with four bullet points: * http://full_URL|title|description|File:Picture1.jpg|File:Thumbnail1.png
 * http://full_URL|title|description|File:Picture2.jpg|File:Thumbnail2.jpg
 * http://full_URL|title|description|File:Picture3.jpg|File:Thumbnail3.jpg
 * http://full_URL|title|description|File:Picture4.jpg|File:Thumbnail4.png

All four lines must be present. The slider is fixed at displaying four entries. Additional lines are ignored.


 *  http://full_URL  &mdash; the full web address to the page being linked to. In-wiki links such as  Main Page  will not work. Since full URLs are being used, links to other websites could be used if needed, rather than just for the wiki the slider is on.
 * Title &mdash; The title for the page. Also used to make the "Go to" button on each slider. Maximum displayed length of the Title is about 46 characters, with up to about 80 characters used for the "Go to" button. (Exact amount varies because a proportional font is used instead of a monospace font like Courier.)
 * Description &mdash; The description of the picture or page. Maximum displayed length is about 77 characters.
 * File:Picture1.jpg &mdash; The picture to be used for the main part of the slider.
 * File:Thumbnail1.png &mdash; The picture to be used as the thumbnail for the main picture, shown below the main picture. This can be the same as the main picture, but since it will be shrunk to a very small size, it is recommended to use a separate thumbnail file.

If either the main picture or the thumbnail are missing, a blank white area is displayed in place of it.

Picture and thumbnail sizes
Both the main pictures and the thumbnails may be in either .jpg or .png format. The main pictures are displayed at 620x250 and thumbnails at 50x25. Both will be resized to fit the display dimensions, but the aspect ratio of the original pictures are not kept. The width is resized independent of the height. As such, it may be better to create a new picture/thumbnail at the display size, or an even multiple (1240x500, 100x50, 150x75, etc.), to avoid having the picture squashed/stretched to fit the display size. It is also recommended to use .png files for the thumbnails since they will retain more detail than .jpg files.

Placement
Sliders may be placed anywhere on a page. However, only one slider per page is allowed. If more than one slider is used, when the next image is displayed for each, the sliders will become corrupted and not work correctly.

Text color
Titles are shown in black. Descriptions are shown in white. Using a tool such as Firebug it may be possible to update Wikia.css to override the colors.

Slider cache
At the moment, once a slider is activated with the   command, any changes to the MediaWiki page or the images may not be shown immediately. It may require several hours or days before the slider's cache is updated by the server.

To get around this delay, copy the data from the existing MediaWiki page and create a new one. Update the slider command and it will see the correct information.

Browser compatibility
Command sliders are compatible with the following web browsers:


 * Internet Explorer 8
 * Firefox 3.6.12

Command sliders are not compatible with:


 * Opera 10.63 (The first picture is displayed and when the second one would be shown, the first picture moves slightly sideways. No other pictures are displayed and it will not return to the first picture. Text for all 4 pictures is displayed and the buttons work, however.)

Gallery slideshow
Gallery slideshows are a series of pictures displayed in sequence, about twice as fast as the Command sliders are displayed. The pictures fade in and out instead of sliding to replace the previous picture.

Any number of pictures may be displayed in a slideshow, but they do not have thumbnails accompanying the pictures. Gallery slideshows may be created by any user, but it is not recommended to put more than one on a page since the slideshows get out of sync with each other fairly easily.

Construction
A Gallery slideshow is constructed as follows:

Other commands are available to set features like the size, positioning, cropping and spacing between the pictures.

Browser compatibility
At present, Gallery slideshows are compatible with web browsers such as Internet Explorer 8, Firefox 3.6.12 and Opera 10.63.

Gallery sliders
Gallery sliders are combination of Command sliders and Gallery slideshows, which any user may create. Like Command sliders, they are limited to four pictures, and use thumbnails for quickly moving to a different picture. In the page editor, Gallery sliders are referred to as "Main page sliders", but may be placed on any page.

Construction
Gallery sliders may be created on any page and do not require a separate data page. They are constructed as follows:

All four lines must be present. The slider is fixed at displaying four entries. Additional lines are ignored.


 * Picture1.jpg &mdash; The name of the picture to be displayed. The "File:" prefix is optional. If the name of the picture is not correct or the picture is missing, the entire line is ignored and only valid lines are processed. This will result in only 3 or fewer pictures being displayed.
 * Title &mdash; The title for the picture.
 *  http://full_URL  &mdash; The full web address to the page being linked to. In-wiki links such as  Main Page  will not work. Since full URLs are being used, links to other websites could be used if needed, rather than just for the wiki the slider is on.
 * linktext= &mdash; The description to show below the picture title.

Both the Title and the Description have a maximum size that can be displayed, depending on which orientation is chosen for the slider.

Picture and thumbnail sizes
The main pictures must be 673x410. They will not be resized and if a picture of a different size is used, the entire data line will be ignored. Since the thumbnails, titles and descriptions are overlayed onto the picture in a band, pictures must be chosen that do not have text or other information in the areas covered by the band.

The main pictures are also used to create the thumbnails. The thumbnails are automatically shrunk to one of two sizes, depending on which orientation is chosen for the thumbnail band.

Orientation
The orientation for the gallery command may be either "bottom" or "right". Which one is used will affect the size of the thumbnails, their placement, and how much text can be displayed.

Each thumbnail is spaced 10 pixels apart from its neighbor.

Bottom orientation:
 * Thumbnails: 90x70
 * Thumbnail crop and resize area: the center 537x410 pixels of the main picture (cropping 68 pixels from each side)
 * Position: along the bottom of the picture
 * Thumbnail band: 90px tall, running the length of the picture
 * Title length: up to approximately 22 characters
 * Description length: up to approximately 36 characters

Right orientation:
 * Thumbnails: 110x60
 * Thumbnail crop and resize area: the bottom-center 673x367 pixels of the main picture (cropping 43 pixels from the top)
 * Position: along the right side of the picture
 * Thumbnail band: 130px wide, running the height of the picture
 * Title length: up to approximately 10 characters
 * Description length: up to approximately 15 characters

The exact length of the Title and Description that is displayed varies because a proportional font is used instead of a monospace font like Courier.

Text color
Titles are shown in black. Descriptions are shown in white. It is not known if these can be adjusted.

Slider cache
Gallery sliders detect changes to the titles, descriptions and pictures more quickly than Command sliders. The main picture will update fairly quickly, but the thumbnails that are created from them are subject to the same delays as Command Sliders.

To get around this delay, re-upload the picture under a new name and update the Gallery slider data.

Browser compatibility
At present, Gallery sliders are compatible with web browsers such as Internet Explorer 8, Firefox 3.6.12 and Opera 10.63.