Jump to main content Jump to doc navigation

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.


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.


Use the Galleriffic plugin, but only display 10 thumbs per page:

   &album=`My Photos`

Hide the pagination and 'show slideshow' controls, but automatically start the slideshow:

   &album=`My Photos`

See Also

  1. Gallery.Gallery
    1. Gallery.Gallery.containerTpl
    2. Gallery.Gallery.thumbTpl
  2. Gallery.GalleryAlbums
    1. Gallery.GalleryAlbums.containerTpl
    2. Gallery.GalleryAlbums.rowTpl
  3. Gallery.GalleryItem
    1. Gallery.GalleryItem.albumTpl
    2. Gallery.GalleryItem.GalleryItemPagination
    3. Gallery.GalleryItem.tagTpl
    4. Gallery.GalleryItem.tpl
  4. Gallery.Plugins
    1. Gallery.Plugins.Galleriffic
    2. Gallery.Plugins.Slimbox
  5. Gallery.Setting Up Your Gallery
  6. Gallery.Example1
  7. 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.



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

Learn more