Extension:SlideBoxLightShow

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.

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/"

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

Configuration Settings

Variable	Default Value	Description
$sbDefaultArguments		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;
}