Gallery.Plugins.Slimbox
Last edited by Thomas Jakobi on Oct 30, 2013.
This is a user-contributed Extra. If you find issues or would like more info or help, please contact the author.
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` ]]
See Also
- Gallery.Gallery
- Gallery.GalleryAlbums
- Gallery.GalleryItem
- Gallery.Plugins
- Gallery.Roadmap
- Gallery.Setting Up Your Gallery
- Gallery.Example1
- Gallery.Setting Up the GalleryItem TV
Suggest an edit to this page on GitHub (Requires GitHub account. Opens a new window/tab).