E-mail
Gallerriffic Plugin for Gallery
The Gallerriffic Plugin allows you to quickly output a Gallery and display its images. It requires you to have jQuery already loaded in the page for it to work.
Usage
Simply add this parameter to the Gallery snippet:
[[!Gallery? &plugin=`galleriffic`]]
Available Properties
Galleriffic will override the following properties in the Gallery snippet. If you want to override them, simply pass the galleriffic-prefixed property instead.
| Name | Overrides | Description | Default Value |
|---|---|---|---|
| gallerifficThumbTpl | thumbTpl | The thumb Chunk to use for each Item. | GallerifficItemThumb |
| gallerifficContainerTpl | containerTpl | The container Chunk to wrap content with. | Galleriffic |
| gallerifficThumbWidth | thumbWidth | The width of the thumbnails. | 75 |
| gallerifficThumbHeight | thumbHeight | The height of the thumbnails. | 75 |
Galleriffic also comes with a few of its own, custom properties. You can pass these into the Gallery snippet to override their defaults.
| Name | Description | Default Value |
|---|---|---|
| numThumbs | The number of thumbnails to show per page. | 15 |
| navigationWidth | The width, in pixels, of the navigation. | 300px |
| enableTopPager | Whether or not to show the top pagination. | 1 |
| enableBottomPager | Whether or not to show the bottom pagination. | 1 |
| maxPagesToShow | Maximum number of pages to show. | 7 |
| renderSSControls | Whether or not to render the slideshow controls. | 1 |
| renderNavControls | Whether or not to render the navigation controls. | 1 |
| enableHistory | Whether or not to enable history. | 0 |
| autoStart | Whether or not to automatically start the slideshow. | 0 |
| defaultTransitionDuration | The duration, in milliseconds, of transitions. | 500 |
| thumbsContainerSel | The CSS selector of the container holding the thumbnails. | #gal-gaff-thumbs |
| imageContainerSel | The CSS selector of the container holding the main image. | #gal-gaff-slideshow |
| captionContainerSel | The CSS selector of the container holding the caption. | #gal-gaff-caption |
| controlsContainerSel | The CSS selector of the container holding the nav controls. | #gal-gaff-controls |
| loadingContainerSel | The CSS selector of the container holding the loading screen. | #gal-gaff-loading |
| playLinkText | The text used for the Play Slideshow link. | |
| pauseLinkText | The text used for the Pause Slideshow link. | |
| prevLinkText | The text used for the Previous Photo link. | |
| nextLinkText | The text used for the Next Photo link. | |
| prevPageLinkText | The text used for the Previous Page link. | |
| nextPageLinkText | The text used for the Next Page link. |
Examples
Use the Galleriffic plugin, but only display 10 thumbs per page:
[[!Gallery? &toPlaceholder=`gallery` &album=`My Photos` &plugin=`galleriffic` &numThumbs=`10` ]]
Hide the pagination and 'show slideshow' controls, but automatically start the slideshow:
[[!Gallery? &toPlaceholder=`gallery` &album=`My Photos` &plugin=`galleriffic` &renderNavControls=`0` &renderSSControls=`0` &autoStart=`1` ]]
