Hello there! We are conducting a survey to better understand the user experience in making a first edit. If you have ever made an edit on Gamepedia, please fill out the survey. Thank you!

Extension:SlideBoxLightShow

From Gamepedia Help Wiki
Jump to: navigation, search
SlideBoxLightShow
Version 2.0.0
Author(s)  • Alexia E. Smith and Hydra Wiki Platform Team
Description
Displays a slide show that can also pop up into a light box style image gallery.

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

Usage[edit | edit source]

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[edit | edit source]

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>

#tag format[edit | edit source]

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[edit | edit source]

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[edit | edit source]

Show Navigation Arrows All the Time[edit | edit source]

.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[edit | edit source]

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

Use within an infobox[edit | edit source]

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

.infoboxtable .slideboxlightshow {
    margin: 0 auto;
}