Auto Grid Responsive Gallery v2.0

Created: June/6/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!

Table of Contents

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:

So 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:

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 and neither navigation bar filter

If you don't want categories and neither a navigation bar filter 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 and navigation bar filter

If you want categories inside the "gallery" folder you need to create subfolders that will be the categories of your gallery (e.g. Illustrations, Photography, Drawings, 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 the images you just add with the filter of categories. The caption box that shows when you over an image will be the name of the image, and the directory will look like this:

Heads up! you can add images in the gallery folder and also have subfolders that will be the categories, the plugin will read them all!

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 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 size, the images on the live preview of my item are around 100kb and the thumnails are around 10kb so the gallery is faster.

Multiple Galleries

You can also make multiple galleries in one page and from different folders! you only need to make another div like this: <div id="grid2" class="centered clearfix" data-directory="gallery2"></div>
with a different id and from a different folder if you want, and then initialize them with Javascript, it would look like this:


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:

        categoriesOrder: 'byDate', 
        imagesOrder: 'byDate', 
        isFitWidth: true, 
        lazyLoad: false, 
        showNavBar: true, 
        smartNavBar: true, 
        imagesToLoadStart: 15, 
        imagesToLoad: 5, 
        aleatoryImagesFromCategories: true,
        horizontalSpaceBetweenThumbnails: 5, 
        verticalSpaceBetweenThumbnails: 5, 
        columnWidth: 'auto', 
        columns: 5, 
        columnMinWidth: 220, 
        isAnimated: true, 
        caption: true, 
        captionCategory: true,
        captionType: 'grid-fade', 
        lightBox: true, 
        lightboxKeyboardNav: true, 
        lightBoxSpeedFx: 500, 
        lightBoxZoomAnim: true, 
        lightBoxText: true, 
        lightboxPlayBtn: true, 
        lightBoxAutoPlay: false, 
        lightBoxPlayInterval: 4000, 
        lightBoxShowTimer: true, 
        lightBoxStopPlayOnClose: false, 

And now a little description of each one:

Option Description
categoriesOrder This is the order of the category navigation bar and you can order it by Date, by Date Reverse, By Name, By Name Reverse or randomly byDate, byDateReverse, byName, byNameReverse, random
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
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
smartNavBar Hide the navigation bar when you don't have categories or just 1 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
aleatoryImagesFromCategories Get few images from each category if not it will get them in order true, false
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
captionCategory Show the category section of the caption 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):

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$$ in this case will link to (the plugin will take care of adding http:// before

Some Logic

When you have categories, and if you select a category through the navigation bar, the plugin will look and find if there still more images from that category to load and if there is more images to load it will show the "load more images" button, then when you click on it it will load more images only from that category (according to the "imagesToLoad" option).

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!