A webserver is required for timthumb!

If you want to use timthumb.php, you need a local running server or upload all files to your webserver!

Getting Started

Include the necessary files in your HTML document

First of all include all necessary files in the head part your HTML document. The plugin requires also a jQuery and the Font Awesome library, if you already include one of these in your site, you do not need to include another one.

<link rel="stylesheet" href="css/jquery.fancygallery.css" type="text/css" media="screen" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<script src="js/jquery.min.js" type="text/javascript"></script>
<!-- optional: Only when using a filter as hover effect -->
<script src="js/svg.min.js" type="text/javascript"></script>
<script src="js/jquery.fancygallery.min.js" type="text/javascript"></script>

Now decide which lightbox you would like to use, you can use PrettyPhoto or FancyBox for it.
For PrettyPhoto includes these files in your document:

<link rel="stylesheet" href="prettyphoto/css/prettyPhoto.css" type="text/css" media="screen" />

<script src="prettyphoto/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

For FancyBox includes these files in your document:

<link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" />

<script src="fancybox/jquery.fancybox.pack.js" type="text/javascript" charset="utf-8"></script>

Add helpers for Fancybox - Button, thumbnail and/or media (Optional)

<link rel="stylesheet" href="fancybox/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="fancybox/helpers/jquery.fancybox-media.js"></script>

<link rel="stylesheet" href="fancybox/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/helpers/jquery.fancybox-thumbs.js"></script>

If you want to use mp4 videos in the inline gallery, include also these:

<link href="mejs/mediaelementplayer.css" rel="stylesheet">
<link href="mejs/mejs-skins.css" rel="stylesheet">

<script src="mejs/mediaelement-and-player.min.js"></script>

Create the markup

Now create the thumbnails for your gallery. Use your favorite tool for creating thumbnails of your images. When you are done with it, you can create the HTML for the gallery. First create a div with a unique id anywhere in your HTML document, where you would like to place the gallery. In this div create another div, which represents an album. This div needs also a title attribute with the title for the album. The HTML looks like this now:
<div id="fancyGallery">
  <div title="Album One">
  </div>
</div>

In the album div you add the a elements, that represent your media. The href attribute store the media, that will appear in the lightbox/inline gallery. The data-thumbnail attribute stores the URL to a custom thumbnail for this media. The title is stored in the title attribute. Would you like to have a description for the media, then just create another data-description attribute in the a element. You can also use HTML tags in the description.

<div id="fancyGallery">
  <div title="Album One">
    <a href="{MEDIA_URL}" title="{TITLE}" data-thumbnail="{THUMBNAIL_URL}" data-description="{DESCRIPTION}">
    </a>
    <a href="{MEDIA_URL}" title="{TITLE}" data-thumbnail="{THUMBNAIL_URL}" data-description="{DESCRIPTION}">
    </a>
    <a href="{MEDIA_URL}" title="{TITLE}" data-thumbnail="{THUMBNAIL_URL}" data-description="{DESCRIPTION}">
    </a>
  </div>
</div>

Of course you can add more albums right after the already created album.

Write an album description

You can also write an album description, that appears under or over the thumbnails, depending which value ('top' or 'bottom') you set for the albumDescriptionPosition option. Just add a div element in a album div, e.g:
<div id="fancyGallery">
  <div title="Album One">
    <div>This is an album description and also supports <strong>HTML</strong> <i>tags</i>, e.g. <a href="http://codecanyon.net" target="_blank">Links</a>.</div>
    <a href="{MEDIA_URL}" title="{TITLE}" data-thumbnail="{THUMBNAIL_URL}" data-description="{DESCRIPTION}">
    </a>
    <a href="{MEDIA_URL}" title="{TITLE}" data-thumbnail="{THUMBNAIL_URL}" data-description="{DESCRIPTION}">
    </a>
    <a href="{MEDIA_URL}" title="{TITLE}" data-thumbnail="{THUMBNAIL_URL}" data-description="{DESCRIPTION}">
    </a>
  </div>
</div>

Call the plugin

Now you only need to call the plugin with the id you set for the first div:
$('#fancyGallery').fancygallery();

Using Options

You can use a lot of options to customize your galleries by your needs.

Available 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)
filter
  • type (String): blur/contrast/sepia/invert/grayscale
  • reverse (Boolean): To reverse the effect, just set it to true.
{type: 'grayscale', reverse: false}
icon
  • 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}.
scale
  • overflow (Boolean): Enable the overflow.
  • direction (String): 'Down' or 'up'.
{overflow: false, direction: 'up'}.
overlay
  • color (Number): The background color for the overlay.
  • opacity (Number): The opacity, 0-1.
{color: '#ffffff', opacity: 0.6}.

For example you would like to change thumbnail width and height and also the album selection, then you only need to pass these options in an object as plugin parameter:

$('#fancyGallery').fancygallery({ thumbWidth: 300, thumbHeight: 400, albumSelection: 'thumbnails' });

Change the lightbox options

For PrettyPhoto

Use the prettyphotoOptions to change the options for prettyphoto.

$('#fancyGallery').fancygallery({ prettyphotoOptions: {allow_resize: false}});

For FancyBox

Use the fancybox API before calling the fancygallery plugin.

$.fancybox.defaults.padding = 50;
$('#fancyGallery').fancygallery();

Customizations

CSS styles for the Thumbnail Album Selection

Open jquery.fancygallery.css and look for the .fg-thumbail-selection class, that holds the CSS styles for the Thumbnail Album Selection.
To change the width and height for the thumbnails, check the li.fg-album-thumbnail a selector, there you can set them.

Set a custom thumbnail for the album selection

When using the album selection, you can define an own thumbnail instead using the first media from the album. Just add a data-thumbnail attribute to the album div and set there the URL of the image.

<div id="fancygalleryg" >
  <div title="Images" data-thumbnail="thumbnail_for_album_selection.jpg">
    ...
  </div>
</div>

Upgrading

To V2.0.1

The description is now stored in a data-description attribute in each anchor element. So you have to change the markup. You can also use the converter who will do this for you.

Updated files

  • jquery.fancygallery.js
  • jquery.fancygallery.min.js
  • jquery.fancygallery.css

Converter

Use the converter to convert your old markup to new markup for V2.0.0.

Paste in your old HTML markup:


Convert


Get the new HTML markup:



© 2013 | radykal.de