Auto Grid Responsive Gallery v2.0
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:
- autoGrid: Copy this folder and paste it inside your wordpress in the plugins folder (yourWordpress/wp-content/plugins)
- autoGrid.zip: Or upload the autoGrid.zip file through the plugins option in your Wordpress plugin page.
- documentation: Where you will find this documentation you are reading.
Once you upload the plugin to your Wordpress you must active it in your Wordpress plugin page and it will look like this:
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:
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:
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.
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:
And now a little description of each one:
|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
|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
|orderInAll||When the 'All' tab is selected the images will be ordered as well and the 'aleatoryImagesFromCategories' option will not work
|showNavBar||Would you like to show the navigation bar of categories
|smartNavBar||Hide the navigation bar when you don't have categories or just 1
|imagesToLoadStart||The number of images to load when it first loads the grid
|imagesToLoad||The number of images to load when you click the load more button or in lazzy load
|aleatoryImagesFromCategories||Get few images from each category if not it will get them in order
|horizontalSpaceBetweenThumbnails||The space between images horizontally
|verticalSpaceBetweenThumbnails||The space between images vertically
|columnWidth||The width of each columns, if you set it to 'auto' it will use the columns option instead
|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
|columnMinWidth||The minimum width of each columns when you set columnWidth to 'auto'
|isAnimated||If you wish to display the animation when resizing or filtering with the nav bar
|caption||Would you like to show the caption in mouse over?
|captionCategory||Show the category section of the caption
|captionType||The type of caption effect
|lightBox||Do you want the lightbox?
|lightboxKeyboardNav||Keyboard navigation of the next and prev image
|lightBoxSpeedFx||The speed of the lightbox effects
|lightBoxZoomAnim||Do you want the zoom effect of the images in the lightbox?
|lightBoxText||If you wish to show the text in the lightbox
|lightboxPlayBtn||Show the play button?
|lightBoxAutoPlay||The first time you open the lightbox it start playing the images
|lightBoxPlayInterval||The interval in the auto play mode
|lightBoxShowTimer||If you wish to show the timer in auto play mode
|lightBoxStopPlayOnClose||Stop the auto play mode when you close the lightbox?
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)
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).
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!