Auto Albums - Multi Level Responsive Grid v1.0

Created: July/23/2013
By: David Blanco
Contact: My Author Page

Thank you for purchasing my item. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Heads up! this plugin needs php in order to work, if you are running it locally in your computer you need a php web server which you can run with XAMP or WAMP in Windows and MAMP in MAC OS.
You can google how to install a php web server with the programs I mentioned, there are many tutorials out there.
Just make sure you can run PHP!

The Files You Need

First when you unzip the plugin you will see this folders:

documentation: Where you will find this documentation you are reading.
plugin: You will find just the files needed for the plugin to work.
preview: Where you will find the preview page like in the demo in the plugin page.

I will focus in the plugin folder so you can learn how to implement the plugin from scratch.
When you open the plugin folder you are going to find this files:

css: You will find the stylesheet of the plugin (CSS files).
Gallery: This is the folder containing all the images that the plugin automatically reads.
img: Here you will find the images needed for the gallery like the icons and loading bar.
index.html: This is a HTML page where you will find just the code for the gallery.
index2.html: This is another HTML page where you will find another example of the gallery.
js: In this folder you will find the scripts needed for the gallery including jQuery.
reader.php: This file is the one that reads the images from its folder and thats why you need PHP since its a PHP script file.

So if you have lets say a HTML page named MyPage.html you need to add this files except the index.html and the directory will look like this:

The Code You Need

Heads Up! You can copy all the code I will mention from the index.html page

There is just few HTML & Javascript code that you need.

First you need to add the gridGallery.css file to the head of your HTML page where I assume you have another stylesheets for your site. You will add it like this:

Second you need to add the scripts files at the bottom of your HTML page (following best practices) where I assume you have another JS files for your site. You will add it like this:

Third You will add the following HTML line anywhere you whish to put the gallery, you can even wrap the gallery in a container and the gallery will adapt to it.
You can use any id for the gallery and you will use it to initialize the plugin through Javascript, the data-directory="gallery" attribute is the directory where the plugin will read automatically the images that in this case is the "Gallery" folder:

Fourth you need to initialize the gallery through Javascript using the id you specified before and you will do it like this:

And now all together will look like this:

Just very few lines right? and you do this once and then no more coding, just drag and drop images into a folder which I will show you how in the next step.

Just Drag and Drop Images Into a Folder

No Categories

If you don't want categories just a grid of images then you can just drag and drop them in the Gallery folder and the folder will look like this:

The plugin will take care of reading them, just refresh your page and you will see this images automatically added to the grid!

With Categories or Albums

If you want categories inside the "Gallery" folder you need to create folders inside that will be the Categories of your Gallery (e.g. Hollidays, Photography, Animals, etc.) and inside those folders you put the images you want. And that's it, refresh your page and you will see now your gallery with albums and then if you click on one of it it will bring the images from that album. The caption box that shows when you over an image will be the name of the image, and the directory will look like this:

Without Limit

Is not over, you can keep creating folders of images inside a folder inside a folder inside a folder and the plugin will still reading them all creating a navigation at the top so you can go back in whatever level of your choice as you can see here:

Album Cover Image

You have 3 options in order to choose a Album Cover Image

By default the plugin will choose a random image inside that album and use it as the cover
You can set the JS option "folderCoverRandom" to false and then the plugin will use the first image of that Album (depending on the order)
You can name an image "folderCover" (folderCover.png, folderCover.jpg, etc.) inside the Album and the plugin will use it as the cover (this image will not be shown in the grid when you open that album)

Adding Performance

To improve performance you can add thumbnails for the grid and then when you click in one of them the plugin will open a lightbox with the real one. To make a thumbnail just add a folder inside your category named "thumbnails" and inside put the thumbnails of your images, the thumbnails must be with the same name of the real image so the plugin can recognize them.
For example if you wish to add a thumbnail for a image named "Black Dress.jpg" you will do it like this:

You don't need to add a thumbnail for each image, just for the ones you like.

Important: make sure that the folder of the thumnails is named "thumbnails" all in lowercase and the thumbnail image has the exact same name of the real one.

Heads Up! For performance take care of your images weight, the images on the live preview of my item are around 100kb and the thumnails are around 10kb so the gallery is faster.

Options

Now is time to make some changes to the default settings of the plugin, and you can configure the options through Javascript as usual.
For example if you wish to change the order of the images you will pass it to the grid function in javascript like this: $('#grid').grid({ imagesOrder: 'random' })
If you want to change another option you need to put a coma and add another option like this: $('#grid').grid({ imagesOrder: 'random', imagesToLoadStart: 20 })

Options Available

These are the all the options available that you can pass to the grid function:

{
      imagesOrder: 'byName', //byDate, byDateReverse, byName, byNameReverse, random
      folderCoverRandom: true, //If there is no folderCover image then get a random image
      foldersAtTop: true, //If you want the folders to be always first and then the images
      showNumFolder: true, //If you want to show the number of folders inside a folder
      showNumImages: true, //If you want to show the number of images inside a folder
      autoHideNumFolder: true, //If there is no folders inside a folder then don't show the number of folders
      autoHideNumImages: false, //If there is no images inside a folder then don't show the number of images
      isFitWidth: true, //Nedded to be true if you wish to center the gallery to its container
      lazyLoad: false, //If you wish to load more images when it reach the bottom of the page
      showNavBar: true, //Show the navigation bar?
      imagesToLoadStart: 15, //The number of images to load when it first loads the grid
      imagesToLoad: 5, //The number of images to load when you click the load more button
      horizontalSpaceBetweenThumbnails: 5, //The space between images horizontally
      verticalSpaceBetweenThumbnails: 5, //The space between images vertically
      columnWidth: 'auto', //The width of each columns, if you set it to 'auto' it will use the columns instead
      columns: 5, //The number of columns when you set columnWidth to 'auto'
      columnMinWidth: 195, //The minimum width of each columns when you set columnWidth to 'auto'
      isAnimated: true, //Animation when resizing or filtering with the nav bar
      caption: true, //Show the caption in mouse over
      captionType: 'grid', // 'grid', 'grid-fade', 'classic' the type of caption effect
      lightBox: true, //Do you want the lightbox?
      lightboxKeyboardNav: true, //Keyboard navigation of the next and prev image
      lightBoxSpeedFx: 500, //The speed of the lightbox effects
      lightBoxZoomAnim: true, //Do you want the zoom effect of the images in the lightbox?
      lightBoxText: true, //If you wish to show the text in the lightbox
      lightboxPlayBtn: true, //Show the play button?
      lightBoxAutoPlay: false, //The first time you open the lightbox it start playing the images
      lightBoxPlayInterval: 4000, //The interval in the auto play mode 
      lightBoxShowTimer: true, //If you wish to show the timer in auto play mode
      lightBoxStopPlayOnClose: false, //Stop the auto play mode when you close the lightbox?
}

And now a little description of each one:

Option	Description
imagesOrder	This is the order of the images in the grid and you can order it by Date, by Date Reverse, By Name, By Name Reverse or randomly `byDate, byDateReverse, byName, byNameReverse, random`
folderCoverRandom	If there's no folderCover image then get a random image from that album and use it as folder cove rimage `true, false`
foldersAtTop	If you want the albums/folders to be always at first in the grid and then the images `true, false`
showNumFolder	If you want to show the number of folders that are inside an album `true, false`
showNumImages	If you want to show the number of image that are inside an album `true, false`
autoHideNumFolder	If there is no folders inside a folder then don't show the number of folders `true, false`
autoHideNumImages	If there is no images inside a folder then don't show the number of images `true, false`
isFitWidth	This option need to be true if you wish the grid to be centered to its container (works when you set a static width in each column) `true, false`
lazyLoad	When you reach the end the grid will try to load more images as if you click the "load more images" button (be careful with this option specially when you have multiple galleries, I would recommend it only when you are using a single gallery and if you don't have content below) `true, false`
showNavBar	Would you like to show the navigation bar of categories `true, false`
imagesToLoadStart	The number of images to load when it first loads the grid `a number`
imagesToLoad	The number of images to load when you click the load more button or in lazzy load `a number`
horizontalSpaceBetweenThumbnails	The space between images horizontally `a number`
verticalSpaceBetweenThumbnails	The space between images vertically `a number`
columnWidth	The width of each columns, if you set it to 'auto' it will use the columns option instead `'auto', a number`
columns	This will only work if you set the columnWidth to 'auto' and it is the number of columns you wish to display in the grid so it can adapt to its container `a number`
columnMinWidth	The minimum width of each columns when you set columnWidth to 'auto' `a number`
isAnimated	If you wish to display the animation when resizing or filtering with the nav bar `true, false`
caption	Would you like to show the caption in mouse over? `true, false`
captionType	The type of caption effect `'grid', 'grid-fade', 'classic'`
lightBox	Do you want the lightbox? `true, false`
lightboxKeyboardNav	Keyboard navigation of the next and prev image `true, false`
lightBoxSpeedFx	The speed of the lightbox effects `a number`
lightBoxZoomAnim	Do you want the zoom effect of the images in the lightbox? `true, false`
lightBoxText	If you wish to show the text in the lightbox `true, false`
lightboxPlayBtn	Show the play button? `true, false`
lightBoxAutoPlay	The first time you open the lightbox it start playing the images `true, false`
lightBoxPlayInterval	The interval in the auto play mode `a number`
lightBoxShowTimer	If you wish to show the timer in auto play mode `true, false`
lightBoxStopPlayOnClose	Stop the auto play mode when you close the lightbox? `true, false`

Some Handy Stuff

When you order the images By Name and you want to edit the order just add A-, B-, etc... at beginning of the name of the images like this (the A-,B-, etc... will not be showing in the caption):

Link to Another Page

If you like to link to another page when you click on a thumbnail of the grid you need to add the url to the page you wish to link in the name of the image after '$$' for example: Plants vs Zombies$$google.com.jpg in this case will link to google.com (the plugin will take care of adding http:// before google.com)

Still Confused

If you still having doubts or if you didn't understand something feel free to contact me via email through my profile Here at the bottom there is a contact form, I will help you any way I can!