How it works?
You just copy this app's files on a server with PHP enabled. In a subfolder called
/photos/, you can put files & sub-folders.
Sub-folders are galleries, pictures will be listed and displayed nicely using Galleria
You can have an unlimited number of (imbricated) galleries, so you can keep things organized.
It's best not to use big pictures files (< 0.5 mb), as thumbnails are resized on the fly, it's both useless (they're displayed as 960px wide) and may slow down the application.
Put the app files in a web-enabled directory.
Put pictures & sub-folders in
A few restrictions apply on folders name:
- accents are supported, everything will be served as UTF-8
- spaces are correctly handled
- some HTML special chars are forbidden:
- single quotes,
- two dots
..are forbidden (it means upper directory!)
Empty folders (no file at all and no subfolders) will not be displayed.
Examples / Demo
$lang variable, at the top of
index.php to either English,
en, or French,
If you want to create your own, translation are very simple PHP files (4 strings to translate!) under
You may consider adding thumbs pictures, so the page will load way faster (because Galleria fetches only the small pictures, and not the full ones) and the UX will be smoother.
Make 60px-big picture, add
_thumb suffix in their names (before the extension ; it may be changed, see config).
You can disable thumbs check: it will not look for thumbs, which may you save a little time in huge collections, but pages may take a huge time to load then. See options.
Anyway, the script will degrade nicely, if no thumbnail is found, it'll use the full-size picture. If a thumb exists but not the corresponding file (same name), it'll not display it.
It supports keyboard commands:
right arrowwill change the picture
Enterkey toggle full screen mode
spacebarlaunch/stop the slideshow mode (with a 5 seconds delay, available in normal or fullscreen mode)
esckey leave any of the previous mode
On mobile devices, you can swipe to change the picture.
What format are supported?
Only pictures are accepted:
.gif files (upper or lowercase).
Set a custom thumbnail
It will first search in a subfolder for a file named
thumbnail.jpg. If not found, it will use the first picture.
If there are no pictures in the folder, then it's recursive, it will search it's first subfolder for a file...
On top of
index.php file, you may configure some parameters:
$use_thumbs: if FALSE, it won't look for thumbnails (you may save some server time; however not using thumbnails is not a really good idea for your viewers)
$thumbs_suffix: you may change the
_thumbsuffix used to differentiate thumbs from full-size pictures to something else
$lang: cf localization
Feel free to use and abuse, modify and redistributing and so on. I would be happy to hear from users!
It uses jQuery, Galleria (and some plugins) under MIT license.