Galleriffic

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

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

Learn more

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`
]]

Galleriffic

Gallerriffic Plugin for Gallery¶

Usage¶

Available Properties¶

Examples¶

See Also¶