##Easy Photo Gallery ####The simpest way to add a photo gallery to your website

---

#####Index - [Contents](#contents) - [Installation](#installation) - [Bootstrap Integration](#bootstrap-integration) - [Adding Photos](#adding-photos) - [Modifying easyphotogallery.js](#modifying-easyphotogalleryjs) - [Modifying EPGgetimages.php](#modifying-epggetimagesphp) - [Displaying Individual Photos](#displaying-individual-photos) - [File Type Support](#file-type-support) - [Multiple Galleries](#multiple-galleries)

---

####Contents Requires:

• Bootstrap css
• Bootstrap js
• jQuery

Includes:

• Bootstrap css
• Bootstrap js
• jQuery
• index.html
• easyphotogallery.js.
• EPGgetimages.php
• style.css

####Installation

I. Download and extract files

Rendering index.html as-is will produce a sample gallery with 4 images and a little bit of data. The simplest way to run the PHP scripts locally is to use MAMP, which includes Apache, MySQL, & PHP.

II. To add the gallery to your site, you must copy the files into the proper directories, or change the file paths accordingly. Defaults:

index.html | root directory

easyphotogallery.js and EPGGgetimages.php | /scripts/

style.css | /styles/

the gallery will be displayed in a div. Your html document must include this div with id photoGallery-Container to display the photos gallery:

<div id="photoGallery-Container"></div>

Note: Your server must be running php for this gallery to work

III. add the easyphotogallery.js file in the head of your document in which the div appears.

####Bootstrap Integration Easy Photo Gallery uses Bootstrap in order to mantain a fluid layout of the photos on differing screen sizes. Each photo is appended inside a div: <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 imageContainer"> These classes are used by bootstrap to determine the column width of each image on differing screen sizes (xs, sm, md, lg). See the bootstrap documentation for more information on using this feature: http://getbootstrap.com/css/#grid and http://getbootstrap.com/css/#responsive-utilities

See also Displaying Individual Photos below.

####Adding Photos Photos can be added to the directory /img/easyPhotoGallery/ and they'll be automatically added to the photo gallery wherever your div appears.

####Modifying easyphotogallery.js

var photos = dataPhotoReturn,
	    i = 0;
		while (i < photos.length) {
			// Appends a div containing the respecive image
			$('#photoGallery-Container').append('<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 imageContainer"> <a href="/img/easyPhotoGallery/' +  photos[i] + '"><img class="galleryImage" src="/img/easyPhotoGallery/' +  photos[i] +'"" style="width: 100%"></a></div>');
			i++
		}

The javascript file simply gets the JSON object passed from the PHP function and loops through it, appending each div containing each image in the array.

####Modifying EPGgetimages.php

$dir = opendir('../img/easyPhotoGallery/');

Line 4 (above) opens the directory with the photos. This can be set to any directory in order to use this photo gallery with multiple different galleries.

if (substr($file,0,1) !== ".") {

$images[] = $file;
}

These lines (7-10) simply ignore system files (beginning with '.'). Currently, there's no way to ignore other non-image files, so the directory needs to only contain images.

####Displaying Individual Photos

Clicking an image opens a Bootstrap modal, showing the filename and the image.

In your index.html file, there's a heading which the js file displays the filename inside of:

	<h4 class="modal-title" id="photoview-label"></h4>

There's also a div in which the image is displayed:

	<div class="modal-body photoview-image"></div>

This modal is the reason that bootstrap.js is included in the dependencies. As with both the Bootstrap js and css, the .min versions may be substitued out.

####File Type Support

This photo gallery supports any file type supported by standard HTML. The 3 commonly supported image types are JPEG, PNG, and GIF. BMP files should work fairly well across browser, but it's safest to stick to those 3. There's a great table on Wikipedia with full cross-browser compatibility of most common image files: Wikipedia Table.

####Multiple Galleries

Currently, there is no support for multiple galleries to be displayed. One way around this is to open multiple directories manually (i.e running a similar php function on each separate directory as a different photo 'library'). In this way, multiple divs may be created with different ID's and the js file adjusted accordingly to put the correct photo library in each div. The next version will add this functionality automatically in order to display multiple libraries seamlessly. See comments in the files for more information.