folioGallery - PHP, jQuery, Ajax Photo Gallery

Features & Installation


is a simple and lightweight gallery that does not require a database to run. It can be used to easily embed complete or individual albums into existing pages. Released under MIT License.

Version 3.0 - released on 9/5/2016 brings many changes from previous versions.
All Versions
User Comments Download Latest


  • Latest is version 3.0 - 9/5/2016
  • Display multiple albums and/or full gallery in one page.
  • Responsive interface (version 3+).
  • Automatic thumbnail creation.
  • Supports "jpg", "gif", "png" files or other extensions.
  • Supports Youtube and Vimeo videos (version 2.0+).
  • Album / Image description from a text file (version 2.0+).
  • Enable / Disable captions for thumbnails.
  • Enable / Disable exif info for images (version 3+).
  • Customizable appearance through CSS.

Browser Support

Version 3+ has been tested on the latest browsers. Older browsers may not display the gallery properly.


  • A server running PHP 5+.
  • PHP GD library (for automatc thumbnail creation).
  • jQuery JavaScript library.


  1. Download and expand the zip file to your computer.
  2. Upload the contents of 'foliogallery-master' to the root directory of your domain.
  3. For each album, create a subfolder in the 'albums' folder and copy your images into it.
  4. Make sure the 'albums' folder and all its subfolders have write permissions.

NOTE: You must keep file and directory structure on your server same as contents of foliogallery-master folder, in order not to mess with file and directory paths.


View foliogallery-demo.php file's source code for guidance or read on.

Adding Videos

  1. To add a video from youtube, simply add an image to your album's folder and name it utube-1234.jpg where 1234 is the id of the video in youtube.
  2. To add a video from vimeo, simply add an image to your album's folder and name it vimeo-1234.jpg where 1234 is the id of the video in vimeo.


  1. Some variables can be modified by editing foliogallery.php
  2. To adjust the overall canvas width of gallery, wrap it in a div of your desired width.

Resizing Gallery

  1. The width/height of the main gallery can be adjusted from the css file by modifying the .fg-container class (at the very top of file). The default gallery max width is 420px (max-width:420px;). You can change it to your needs or comment out / remove this line for 100% width.
  2. Example: the default thumbnail width is 140px (including margins), to display 4 thumbnails instead of 3 in each block, change max-width:420px; to max-width:560px; in .fg-container class.
  3. The size of thumbnails can be adjusted from ".fg .thumbwrap-inner" and ".fg .thumb" classes. If you increase the thumbnail width in the css file, you should increase it in the $thumb_width variable as well (in the config.php file) and regenerate new thumbnails, otherwise the may look blurry.
  4. To increase the canvas height or to make canvas height dynamic, change it from .fg .thumbwrap-inner class and comment out the javascript code from the top section in foliogallery.php file.
  5. If you want to change the canvas to full screen width/height, you can remove the prev/next buttons for cleaner esthetics in folliogallery.php file source code.


complete gallery example

  1. Paste <div class="folioGallery" id="folioGallery"></div> to your page's html, where you want your gallery to appear.
  2. Both ID and CLASS attributes must be folioGallery

a specific album example

  1. Paste <div id="SOME_UNIQUE_ID" class="folioGallery" title="Las Vegas Strip"></div> to your page's html, .
  2. The title attribute is the subfolder name where images are located.
  3. The ID attribute can be anything but must be unique.
  4. The class attribute must be folioGallery.

descriptions example

  1. To add descriptions to an album or image, create or edit a file called descriptions.txt in your album's folder and add descriptions to it.
  2. ALBUM description must be added on the first line like so: album;description of album;.
  3. Image description must be added like so: imagefilename.jpg;description of image; where imagefilename.jpg is the name of the file in your album.
  4. Each image description must be entered after imagefilename.jpg; (note the semicolon).
  5. Each description must be on a new line and must end with a semicolon

Stand Alone Examples

User Comments

Page Comments  loading, please wait...