Ultimate Grid Responsive Gallery v1.0

Created: July/1/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

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

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 must create a container (div) that will contain all the boxes for the grid.
You can use any id for the gallery and you will use it to initialize the plugin through Javascript. And it will look like this:

Then you can add boxes (divs) inside were you will specify:

You need to create a div with a class of "box" and inside you need to specify the things mention before. This is the code of how you will do it:

Then you can create as many boxes as you want for the grid as you can see in the example.

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:

And you can copy&paste the code from here: 

<!-- STYLE FOR THE PLUGIN -->   
<link rel="stylesheet" href="css/gridGallery.css" /> 

<div id="grid">
        
        <div class="box" data-category="Drawings">
            <div data-thumbnail="gallery/Drawings/thumbnails/Plants vs Zombies.jpg" ></div>
            
            <div data-image="gallery/Drawings/Plants vs Zombies.jpg" ></div>
            
            <div class="thumbnail-caption">
                  CAPTION OF THE IMAGE
            </div>

            <div class="lightbox-text">
                  TEXT OF THE LIGHTBOX
            </div>
        </div>

</div>

<!-- SCRIPTS FOR THE PLUGIN -->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/rotate-patch.js"></script>
<script src="js/gridGallery.min.js"></script>

<script>
  
    $(function(){
        //INITIALIZE THE PLUGIN
        $('#grid').grid();
    });    
       
</script>
Remember You can add as many boxes as you want inside the container as you can see when you open the index.html file of the example or the plugin folder.

Adding Performance

You don't need to add a thumbnail for each image, just for the ones you like. If you don't add a thumbnail it will take the normal image as thumbnail for the grid but is very recommended to use thumbnails so the grid is faster.

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.

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 number of images to load you will pass it to the grid function in javascript like this: $('#grid').grid({ imagesToLoad: 5 })
If you want to change another option you need to put a coma and add another option like this: $('#grid').grid({ imagesToLoad: 5, imagesToLoadStart: 15 })

Options Available

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

{
    showFilterBar: true, 
    imagesToLoad: 5, 
    imagesToLoadStart: 15, 
    lazyLoad: false, 
    isFitWidth: true, 
    horizontalSpaceBetweenThumbnails: 5, 
    verticalSpaceBetweenThumbnails: 5, 
    columnWidth: 'auto', 
    columns: 5, 
    columnMinWidth: 220, 
    isAnimated: true, 
    caption: true, 
    captionType: 'grid', 
    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
showFilterBar Would you like to show the navigation bar of categories true, false
imagesToLoad The number of images to load when you click the load more button or in lazzy load a number
imagesToLoadStart The number of images to load when it first loads the grid a number
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
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
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

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 to the div with a class of "box" in an attribute named data-url and it will look like this (linking to google for example):

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!