Slimbox
Last updated Dec 8th, 2019 | 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
$311 per month—let's make that $500!
Learn moreSlimbox 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`
]]
See Also¶
- Gallery.Gallery
- Gallery.GalleryAlbums
- Gallery.GalleryItem
- Gallery.Plugins
- Gallery.Setting Up Your Gallery
- Gallery.Example1
- Gallery.Setting Up the GalleryItem TV
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
$311 per month—let's make that $500!
Learn more