folioGallery - PHP, jQuery, Ajax Photo Gallery

Features & Installation Download V 2.0 Comments Examples


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 2.0 supports Youtube and Vimeo videos and the ability to add detailed album/image descriptions from a text file.

Latest Version 2.0 - 01/31/2015 - Download

Older Versions


  • Display multiple albums and/or full gallery in one page.
  • Automatic thumbnail creation.
  • Supports "jpg", "gif", "png" files or other extensions.
  • Supports Youtube and Vimeo videos (version 2.0+).
  • Detailed album/image descriptions from a text file (version 2.0+).
  • Automatic pagination in flexible blocks.
  • Display random or static thumbnails in gallery mode.
  • Sort albums and thumbs by date or name.
  • Customizable appearance through CSS.
  • Use PHP include mode or ajax mode.


  • 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.

The following locations define paths, no changes required with default installation:
  • foliogallery-demo.php -> (or your web page) ==> holds paths to required javascript & css files.
  • foliogallery.php -> $mainFolder variable ==> holds path to albums folder.
  • foliogallery.js -> var folioGalleryDir variable ==> holds path to foliogallery folder.

Usage (php include mode)

You can display your gallery with php include. View foliogallery-demo2.php source code in the zip file.

Usage (ajax mode)

View foliogallery-demo.php file's source code for guidance or read on.
  1. To add a complete gallery with list of all your albums to your page:
    • Paste <div id="folioGallery" class="folioGallery"></div> where you want your gallery to appear in your page
    • Both ID and CLASS attributes must be folioGallery
  2. To add a specific album to your page:
    • Paste <div id="SOME_UNIQUE_ID" class="folioGallery" title="Mixed Gallery"></div> to your page's html, where you want your gallery to appear.
    • The ID attribute can be anything but must be unique.
    • The class attribute must be folioGallery.
    • The title attribute is the folder name of the album you want to display.
  3. To paginate your gallery or album in any increment blocks:
    • Paste <div class="numPerPage" title="NUMBER_OF_ITEMS_TO_SHOW"></div> between your gallery/album div. See examples.
    • If number of items is not specified this way, the value of $itemsPerPage variable will be used for pagination.
  4. Some variables can be modified by editing foliogallery.php
  5. To adjust the overall canvas width of gallery, modify fg class in the css file.

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.

Adding album/image descriptions

  1. To add a description to your album, create or edit descriptions.txt file in your album's folder and add your album description like so: album;description of album...;.
    NOTE: album description must be added on the first line and it must come after album; and must end with a semicolon. Refer to examples in the zip file.
  2. To add a description to an image, create or edit descriptions.txt file in your album's folder and add your image description like so: imagefilename.jpg;description of this...;, where imagefilename.jpg is the name of the file in your album that you want to add description.
    NOTE: image description must come after imagefilename.jpg;. Each image description must be on a new line and must end with a semicolon.
Examples & UsageUser Comments
Stand Alone Examples (ajax)  /  Example (php include)

Examples (ajax mode)

Complete gallery with all the albums paginated in 3 item blocks:

<div class="folioGallery" id="folioGallery"><div class="numPerPage" title="3"></div></div>

Single album in subfolder "Big Bear California" paginated in 6 item blocks:

<div class="folioGallery" id="folioGallery2" title="Big Bear California"><div class="numPerPage" title="6"></div></div>

Single album in subfolder "Las Vegas Strip" paginated in 5 item blocks:

<div class="folioGallery" id="folioGallery3" title="Las Vegas Strip"><div class="numPerPage" title="5"></div></div>

User Comments

Leave Comment
Page Comments  loading, please wait...