Create your own individual gallery.

Different types of media

The plugin supports different types of media like images, videos (mov), YouTube and Vimeo videos, websites and much more.

Lightboxes/Inline Gallery

You can choose between 2 different lightboxes, PrettyPhoto or FancyBox, or use the custom inline gallery.

3 different navigations

You can choose between 3 different navigations - Arrows, Pagination and Dots.

Predefined color themes

You can choose between 7 predefined color themes or just create your own color theme easily.

Effect variations

The plugin comes with different hover effects for the thumbnails and titles, which can also be adjusted.

3 album selections

The way the users can open an album, it's also completely up to you. Choose between Dropdown, Thumbnail and Menu.


The thumbnails will fit to the screen size and if you choose FancyBox as lightbox, you will also have a responsive lightbox.

A lot of Options

You can customize your gallery with a lot of options, that allows you to create individual and unique galleries.


Select between 7 predefined color themes.

Basic with default options

A gallery with the default options.

This is an album description and also supports HTML tags, e.g. Links.
Another album description

Grayscale Thumbnails and Dots Navigation

Here is a grayscale filter used. You can choose between 5 different filters.

		thumbWidth: 250,
		thumbHeight: 160,
		navigation: 'dots',
		navAlignment: 'center',
		columnOffset: 55,
		imagesPerPage: 3,
		thumbnailHoverEffect: 'filter',
		thumbnailEffectOptions: {opacity: 0.6},
		columns: 3

Direction aware hover effect

Here is the direction aware hover effect enabled.

		columns: 4,
		borderThickness: 0,
		directionAwareHoverEffect: true,
		shadowImage: false

Thumbnails Selection with Pagination

Here you select the album via thumbnails, FancyBox is set as lightbox. Pagination is also enabled.

		thumbWidth: 350,
		thumbHeight: 200,
		borderThickness: 6,
		albumSelection: 'thumbnails',
		navigation: 'pagination',
		navAlignment: 'left',
		imagesPerPage: 4,
		shadowImage: false,
		rowOffset: 60,
		columnOffset: 150,
		lightbox: 'fancybox',
		columns: 2

Menu Selection

This gallery has a menu as album selection and FancyBox as lightbox. The lightbox has also Tweet and Like Buttons.

		thumbWidth: 180,
		thumbHeight: 150,
		borderThickness: 2,
		albumSelection: 'menu',
		imagesPerPage: 10,
		navigation: 'dots',
		allMediasSelector: 'Show All Images',
		selectAlbum: 'Show All Images',
		shadowImage: '',
		rowOffset: 40,
		lightbox: 'fancybox',
		columns: 5,
		thumbnailHoverEffect: 'scale',
		thumbnailEffectOptions: {direction: 'up', overflow: true},
		titlePlacement: 'inside',
		titleHoverEffect: 'fade'

Thumbnails Selection with stacked polaroid frames

You can use cool polaroid frames for the album selection, which can be easily changed via the options. I also set the showOnlyFirstThumbnail to true, that will open the whole album in the lightbox just from a single album thumbnail.

		albumSelection: 'thumbnails',
		lightbox: 'fancybox',
		thumbnailSelectionOptions: {layout: 'polaroid'},
		showOnlyFirstThumbnail: true

Inline Gallery

Here is the inline gallery enabled. The inline gallery supports image, youtube, vimeo and mp4 videos. If the link does not contain one of these media types, it will open the link in a new window.

		lightbox: 'inline',
		borderThickness: 2,
		shadowImage: false,
		imagesPerPage: 0,
		thumbWidth: 100,
		thumbHeight: 80,
		columns: 7,
		thumbnailHoverEffect: 'icon',
		thumbnailEffectOptions: {iconUrl: 'images/fancygallery/hover_icon_cm_white.png', transition: 't2b'}

Hover Effects

Check out some hover effect variations for the thumbnails.


Thumbnail Effect Options



Option (Type) Explanation Default Value
thumbWidth (Number) The width for every thumbnail. 200
thumbHeight (Number) The height for every thumbnail. 150
backgroundColor (String) The color of the background for every thumbnail. '#F5F5F5'
borderThickness (Number) The thickness of the border. 3
shadowOffset (Number) The offset of the shadow. 0
rowOffset (Number) The space between the thumbnail rows. 50
columnOffset (Number) The minimum space between the thumbnail columns. 30
imagesPerPage (Number) The number of images that will be loaded at once. Would you like to load all images of an album at once, just set the value to 0. 8
scaleMode (String) Set a scale mode for the thumbnails. 'prop' for proportional scaling, 'stretch' for stretched scaling and 'crop' for cropping the thumnbails. Stretch does not work when using a filter as hover effect. 'crop'
shadowImage (String) The URL of the shadow image. Take a look at source/images/fancygallery/shadows folder. There you find 3 different shadows. 'images/fancygallery/shadow.png'
selectAlbum (String) The album which should be loaded first. Just set the album title to load the album. ''
allMediasSelector (String) Set the text for the button to show all media of a gallery. Leave it empty, when you do not need this button. ''
albumSelection (String) Select between 3 different album selection: 'dropdown', 'thumbnails', 'menu' 'dropdown'
navigation (String) The type of navigation: 'arrows', 'pagination', 'dots' 'arrows'
navAlignment (String) Set the alignment of the navigation - 'left', 'center' or 'right'. 'left'
navPreviousText (String) The text for the previous button of the naviagtion. '<'
navNextText (String) The text for the next button of the naviagtion. '>'
navBackText (String) The text for the "back to album overview" button of the naviagtion. '↵'
lightbox (String) The type of lightbox. You can choice between prettyphoto and fancybox. Please note, when using fancybox and you have a commercial website, you need to buy a license for FancyBox. You can also set this option to 'inline' for activating the inline gallery or to 'none' for opening the link in a new window. 'prettyphoto'
prettyphotoOptions (Object) An object containing the prettyphoto options. {}
columns (Number) The number of columns. By default its set to 0, as soon as you set a value higher than 0, the offset between the columns will be automatically calculated. 0
mediaText (String) The text for the media label, only when using thumbnails as album selection. 'Media'
showOnlyFirstThumbnail (Boolean) Show only the first thumbnail of an album. Useful when opening a whole album in the lightbox from just one thumbnail. false
theme (String) The color theme for the navigation and album selection. Choice between 'white', 'black', 'red', 'blue', 'orange', 'green', 'purple'. 'white'
borderColor (String) The color for the border of the thumbnails. '#bdc3c7'
inlineGalleryOptions (Object) An object containing options for the inline gallery.
  • width (Number | String) - The width for the inline gallery
  • height (Number | String) - The height for the inline gallery
  • youtubeParameters (String) - A string containing parameters for youtube
  • vimeoParameters (String) - A string containing parameters for vimeo
  • showFirstMedia (Boolean) - Shows the first media of an album automatically
{width: '100%', height: 500, youtubeParameters: '&showinfo=1&autoplay=1', vimeoParameters: 'autoplay=1', showFirstMedia: false}
thumbnailSelectionOptions (Object) An object containing options for the thumbnail selection.
  • layout (String) - The layout style for the thumbnails - 'default' or 'polaroid'
  • width (Number) - The width for the thumbnails
  • height (Number) - The height for the thumbnails
  • albumsPerPage (Number) - Amount of albums per page. Helpful when you would like to paginate your albums.
{layout: 'default', width: 250, height: 150, albumsPerPage: 0}
albumDescriptionPosition (String) The position of the album description - 'top' or 'bottom'. 'top'
thumbnailHoverEffect (String) The thumbnail hover effect. Choose between 'fadeIn', 'fadeOut', 'icon', 'filter', 'slide', 'overlay', 'none'. You can also customize each effect with the thumbnailEffectOptions option. 'fadeIn'
thumbnailEffectOptions (Object) Check out the table for the thumbnail effect options. With this option you can customize each hover effect even more. {}
titlePlacement (String) The placement for the title - 'outside' or 'inside'. 'outside'
titleOptions (String) An object containing options for the title.
  • background (String): The background color for the tile (Default: '#F5F5F5')
  • color (String): The text color for the title (Default: '#2C3E50')
  • stretchToWidth (Boolean): Stretch the title. Only available when titlePlacement is set to 'inside' (Default: true).
titleHoverEffect (String) The title hover effect. Choice between 'slide', 'scale' (only for 'inside'), 'fade', 'visible', 'none'. 'slide'
directionAwareHoverEffect (Boolean) Enable the direction aware hover effect. false
target (String) If lightbox is set to none, the media URL will opened in a target window ('_blank', '_self'). '_blank'
facebookLikeButton (Boolean) Enable facebook like button in lightbox. true
tweetButton (Boolean) Enable tweet button in lightbox. true
pinItButton (Boolean) Enable Pin It button in lightbox. true

Thumbnail Effect Options

Effect Available options Default values
fadeIn opacity (Number): The opacity, 0-1. {opacity: 0.6}
fadeOut opacity (Number): The opacity, 0-1. {opacity: 0.6)
  • type (String): blur/contrast/sepia/invert/grayscale
  • reverse (Boolean): To reverse the effect, just set it to true.
{type: 'grayscale', reverse: false}
  • iconUrl (Number): The opacity, 0-1.
  • transition (String): The transition for the icon. 'l2r', 'r2l', 't2b', 'b2t', 'fade'
{iconUrl: 'images/fancygallery/hover_icon_cm_white.png', transition: 'fade'}
slide overflow (Boolean): Enable the overflow. {overflow: false}.
  • overflow (Boolean): Enable the overflow.
  • direction (String): 'Down' or 'up'.
{overflow: false, direction: 'up'}.
  • color (Number): The background color for the overlay.
  • opacity (Number): The opacity, 0-1.
{color: '#ffffff', opacity: 0.6}.


FancyBox 2 license information!
FancyBox 2 is licensed under the therms of the Creative Commons Attribution-NonCommercial 3.0 License .
If you would like to use FancyBox 2 for commercial purposes, you can purchase a license from http://fancyapps.com/store/ !