Auto Grid Responsive Gallery v2.0


Created: June/20/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 these folders:

Once you upload the plugin to your Wordpress you must active it in your Wordpress plugin page and it will look like this:


The Shortcode

Now you can put the gallery anywhere in your page or post just by adding this small shortcode:

[autoGrid]
And then it will create a gallery from the images that are inside a folder named: "gallery", this folder is in the autoGrid plugin folder and you can change it in the admin page of this plugin.

Also if you want to create another gallery let say in another page and from a different folder you can pass a parameter to the shortcode and specify another directory for the gallery, for example to create a gallery from a gallery2 folder you will do it like this:

[autoGrid directory="gallery2"]


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.

Options

Now is time to make some changes to the default settings of the plugin. You can change them in the Admin Page of the plugin and you can see where is located in the following image:

Options Available

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
orderInAll When the 'All' tab is selected the images will be ordered as well and the 'aleatoryImagesFromCategories' option will not work true, false
showNavBar Would you like to show the navigation bar of categories Yes, No
smartNavBar Hide the navigation bar when you don't have categories or just 1 Yes, No
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 Yes, No
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 Yes, No
caption Would you like to show the caption in mouse over? Yes, No
captionCategory Show the category section of the caption Yes, No
captionType The type of caption effect 'grid', 'grid-fade', 'classic'
lightBox Do you want the lightbox? Yes, No
lightboxKeyboardNav Keyboard navigation of the next and prev image Yes, No
lightBoxSpeedFx The speed of the lightbox effects a number
lightBoxZoomAnim Do you want the zoom effect of the images in the lightbox? Yes, No
lightBoxText If you wish to show the text in the lightbox Yes, No
lightboxPlayBtn Show the play button? Yes, No
lightBoxAutoPlay The first time you open the lightbox it start playing the images Yes, No
lightBoxPlayInterval The interval in the auto play mode a number
lightBoxShowTimer If you wish to show the timer in auto play mode Yes, No
lightBoxStopPlayOnClose Stop the auto play mode when you close the lightbox? Yes, No

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


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!