Photo gallery with MooTools

(No Ratings Yet)

Loading ...

3,127 views

Photo Gallery is a open source gallery built with Mootools Javascript Library the compact, modular, Object-Oriented javascript framework. Designed to allow you to upload your photos to a desired folder, tell the (E)2 Photo Gallery what folder to look at and it will automatically load the images using PHP..

Features:

* Smooth Image Transitions
* Quick change between 4 designs
* Thumbnail Viewer
* Automatic Photo Detection
* Image Uploader Included
* Four Design Viewer Options
* No Database Needed
* Automatic Adjustment to Image Sizes
* Reads in Photo Meta Data (IPTC Info)
* Titles
* Descriptions
* Copyright Info
* Author
* Dynamically Built using PHP
* Easy Maintance
* Hide/Show Thumbnails

Installation

Step 1 – Open config.php file and edit the following settings

//Define the folder where your photos will be placed on you server. //Relative to the path you place the gallery index.php $gallerypath="images"; //EX. images or ../gallery/images no trailing slash needed $thumbpath="imagethumbs"; //EX. images or ../gallery/imagethumbs $transitionspeed="500"; //How fast you want the animations to render $fadespeed="300"; //How fast you want the photos to fade in and out $username="username_here";//Username for accessing image uploader $password="password"; //Password to access image uploader

Step 2 – Upload files to your server.

Step 3 – Browse to your site and go to http://www.yoursite.com/gallery_location/uploader/, and log in using the “username” and “password” you set up in the config.php file. Start uploading photos to the folder you’ve defined for that gallery and thumbnail folder.
The image uploader will automatically crop the thumbnails to fit in the thumbnail viewer of the photogallery.

Step 5 – Clean, Rinse, and Repeat….Enjoy.

Setup to show only one Stylesheet

Step 1 – Open index.php find the following:

Step 2 – Decide which of the gallery styles you’d like to display and remove all other references to those stylesheets(if you use any other style sheet besides the default, be sure to remove the “alternate stylesheet” to “stylesheet” ) EX:

Step 3 – Find:

Step 4 – Everything inside this div holds the images and links to switch between the stylesheets and replace it with:

Multiple Galleries

Step 1 – Open config.php and copy from line 4 to 7
$gallerypath="images"; //EX. images or ../gallery/images no trailing slash needed $thumbpath="imagethumbs"; //EX. images or ../gallery/imagethumbs $transitionspeed="500"; //How fast you want the animations to render $fadespeed="300"; //How fast you want the photos to fade in and out
Step 2 -Then open index.php and find line 51
require_once”config.php”;

Step 3 – Replace this line with the following code and update the information to point to the correct folder and thumbnail folder
$gallerypath="images"; //EX. images or ../gallery/images no trailing slash needed $thumbpath="imagethumbs"; //EX. images or ../gallery/imagethumbs $transitionspeed="500"; //How fast you want the animations to render $fadespeed="300";

Step 4 – Then save as a new gallery page and repeat for as many galleries you want.

Demo: http://www.e2interactive.com/e2_photo_gallery/demo/
Download: http://www.e2interactive.com/images/e2_photo_gallery_full.zip
Source: http://www.e2interactive.com/e2_photo_gallery/documentation/