Community Central
Community Central

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


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!| Omitting the description is allowed to use a link only by leaving the space for the description blank. Example: File:Image3.jpg|| Descriptions can be formatted using HTML tags such as <i>. Example: File:Image3.jpg|Check out <i>this</i> picture!

File:Image3.jpg|Check out this picture!


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

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

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

#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|
|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;