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.
- 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.
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).
- Download and expand the zip file to your computer.
- Upload the contents of 'foliogallery-master' to the root directory of your domain.
- For each album, create a subfolder in the 'albums' folder and copy your images into it.
- Make sure the 'albums' folder and all its subfolders have write permissions.
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.
file's source code for guidance or read on.
- 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.
- 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.
- Some variables can be modified by editing foliogallery.php
- To adjust the overall canvas width of gallery, wrap it in a div of your desired width.
- 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.
- 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.
- 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.
- 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
- Paste <div class="folioGallery" id="folioGallery"></div> to your page's html, where you want your gallery to appear.
- Both ID and CLASS attributes must be folioGallery
a specific album example
- Paste <div id="SOME_UNIQUE_ID" class="folioGallery" title="Las Vegas Strip"></div> to your page's html, .
- The title attribute is the subfolder name where images are located.
- The ID attribute can be anything but must be unique.
- The class attribute must be folioGallery.
- 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.
- ALBUM description must be added on the first line like so: album;description of album;.
- Image description must be added like so: imagefilename.jpg;description of image; where imagefilename.jpg is the name of the file in your album.
- Each image description must be entered after imagefilename.jpg; (note the semicolon).
- Each description must be on a new line and must end with a semicolon