Slimbox

Last updated Mar 6th, 2021 | Page history | Improve this page | Report an issue

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.

Backers

Budget

$306 per month—let's make that $500!

Learn more

Slimbox Plugin for Gallery¶

The Slimbox Plugin allows you to quickly output a Gallery and display its image thumbnails, with a simple lightbox overlay when you click a thumbnail. It uses the Slimbox2 plugin for jQuery.

Usage¶

Simply add this parameter to the Gallery snippet:

[[!Gallery? &plugin=`slimbox`]]

Available Properties¶

Slimbox comes with its own custom properties. You can pass these into the Gallery snippet to override their defaults.

Name	Description	Default Value
slimboxUseCss	If 1, will use the provided slimbox CSS file.	1
slimboxCss	If slimboxUseCss is 1, will load CSS file in this property. If none is set, will use the default provided one.	{slimbox_url}packages/slimbox/css/slimbox2.css
slimboxRenderJsOnStartup	Load the Slimbox JS in the HEAD of the page. If set to 0, will load it at the bottom.	1
slimboxLoadJQuery	If set to 1, will add JQuery to load in the page. Leave at 0 if you're already loading jQuery (recommended).	0
slimboxJQueryUrl	If slimboxLoadJQuery is set to 1, will load the jQuery JS file from this URL.	`https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js`
slimboxJsTpl	The tpl chunk for the slimbox JS. You can most likely ignore this setting.	slimbox/js

There are also properties that affect how Slimbox behaves:

Name	Description	Default Value
loop	If set to 1, allows the user to navigate between the first and last images of a Slimbox gallery, when there is more than one image to display.	0
overlayOpacity	The level of opacity of the background overlay. 1 Is opaque, 0 is completely transparent.	0.8
overlayFadeDuration	The duration of the overlay fade-in and fade-out animations, in milliseconds. Set it to 0 to disable the overlay fade effects.	400
resizeDuration	The duration of the resize animation for width and height, in milliseconds. Set it to 0 to disable resize animations.	400
resizeEasing	The name of the easing effect that you want to use for the resize animation (jQuery Easing Plugin required for all but "swing"). Many easings require a longer execution time to look good, so you should adjust the resizeDuration option above as well.	swing
initialWidth	The initial width of the overlay box, in pixels.	250
initialHeight	The initial height of the overlay box, in pixels.	250
imageFadeDuration	The duration of the image fade-in animation, in milliseconds. Set it to 1 to disable this effect and make the image appear instantly.	400
captionAnimationDuration	The duration of the caption animation, in milliseconds. Set it to 1 to disable it and make the caption appear instantly.	400
counterText	Text value; allows you to customize, translate or disable the counter text which appears in the captions when multiple images are shown. Inside the text, {x} will be replaced by the current image index, and {y} will be replaced by the total number of images. Set it to false (boolean value, without quotes) or "" to disable the counter display.	"Image {x} of {y}"

Examples¶

Load slimbox for the album with ID 2, and make it loop continuously. Also, load jQuery.

[[Gallery?
    &album=`2`
    &plugin=`slimbox`
    &loop=`1`
    &slimboxLoadJQuery=`1`
]]

Load slimbox for the album with ID 2, and put the JS and CSS at the bottom of the page.

[[Gallery?
    &album=`2`
    &plugin=`slimbox`
    &slimboxRenderJsOnStartup=`0`
]]

Slimbox

Slimbox Plugin for Gallery¶

Usage¶

Available Properties¶

Examples¶

See Also¶