Extension:SlideBoxLightShow

SlideBoxLightShow
Version	2.0.0
Author(s)	Alexia E. Smith Hydra Wiki Platform Team
Description
Displays a slide show that can also pop up into a light box style image gallery.
Default?	Y
UCP?	Y
GP?

The SlideBoxLightShow extension organizes a list of images into a slide show that can be popped up into a light box style display.

Usage

Attributes for the slideboxlightshow tag

Attribute	Description
sequence="[forward|reverse|random]"	Default: forward The sequence in which images are rotated.
transition="[fade|left|right|up|down]"	Default: fade Transition type used to change images.
transitionSpeed="[milliseconds]"	Default: 500 Time in milliseconds that transitions last. Tip: Setting the transition speed to 0 with a fade transition will result in an instant cut transition.
halign="[left|center|right]"	Default: center Position to horizontally align images.
valign="[top|middle|bottom]"	Default: middle Position to vertically align images.
interval="[milliseconds]"	Default: 5000 Time in milliseconds to display each image.
width="[pixels]"	Default: null - Width of the widest image. Sets the width of the box and the maximum width behavior of images in pixels.
height="[pixels]"	Default: null - Height of the highest image. Sets the height of the box and the maximum height behavior of images in pixels.
popup="[true|false]"	Default: true - Show lightbox pop ups. Enables or disables showing lightbox style pop ups when clicking on an image. Adding a link on an image disables pop ups.
slideshowOnly="[true|false]"	Default: false - Use both slideshow and lightbox functionality. Turns on using the slideshow only and allow navigation with arrows on the slideshow. Using this option causes the popup option to be ignored and default to false.
carousel="[true|false]"	Default: false Carousel mode is a special mode that allows any content to be placed into slides only. Anything on a new line will be treated as a separate slide and can include parser functions, parser tags, and other standard Mediawiki elements. Enabling this mode disables popups and forces slideshowonly mode to true.

Enter one properly namespaced file name per line. Any files that do not exist will be silently dropped. Descriptions and URL links can be added images by piping it behind the image name. Example: File:Image3.jpg|Check out this picture!|http://www.example.com/ Omitting the description is allowed to use a link only by leaving the space for the description blank. Example: File:Image3.jpg||http://www.example.com/ Descriptions can be formatted using HTML tags such as <i>. Example: File:Image3.jpg|Check out <i>this</i> picture!

File:Image1.jpg
File:Image2.jpg||http://www.example.com/
File:Image3.jpg|Check out this picture!

Example

This example shows three images changing at an interval of 1000 milliseconds.

<slideboxlightshow interval="1000">
File:BenUser2.png
File:Wyn.png
File:Curse_flame.png|This is the Curse Flame
</slideboxlightshow>

This is the Curse Flame

#tag format

When using slideboxlightshow inside other templates, sometimes it is easier to use the {{#tag:slideboxlightshow|...}} formatting. For example,

{| class="infoboxtable"
|-
! colspan="2" class="infoboxname" |  "{{{name}}}"
|-
{{#if: {{{slideshow|}}} | {{!}} colspan="2" {{!}} {{#tag:slideboxlightshow|
{{{slideshow}}}
|halign=center|width=195|height=195}} }}
|-
! colspan="2" class="infoboxdetails" | Details 
|-
{{#if: {{{field|}}} | {{!}} style="width:50%;" {{!}} <div>Some field</div> {{!!}} {{{field}}} }}
|}

See also CSS styling considerations.

Configuration Settings

Variable	Default Value	Description
$wgSBDefaultArguments		Takes an array of defaults. The keys are the same as attributes on the function tag, but all in lowercase.

CSS Customizations

Show Navigation Arrows All the Time

.lb-prev {
	background:url(../images/prev.png) left 48% no-repeat;
}
.lb-next {
	background:url(../images/next.png) right 48% no-repeat;
}

Medium Gray Border

.lb-outerContainer {
	background-color: #555;
}

Use within an infobox

The following snippet ensures the slideshow is centered within the infobox.

.infoboxtable .slideboxlightshow {
    margin: 0 auto;
}