Oh Snap! watch to the right
That's right, you can put the galley supper fast and easy in your page anywhere as you can see!
Just with this HTML markup
It never was that easy to implement!
You do this once and then no more coding! just drag and drop images into a folder!
Some Features
-
Syntax
The Grid has the easiest syntax ever, just with a line of HTML and another one of Javascript.
-
Advantage
Forget about coding images, just drag and drop images into a folder and the plugin does the rest.
-
Responsive
Will automatically adapt to its container taking care of keeping the right proportions.
-
Infinite
You can have infinite levels, folders inside a folder inside a folder inside a folder etc.
-
Order
You can order the images by Date, by Date Reverse, By Name, By Name Reverse or Random.
-
Customizable
You can play around enabling and disabling many features and options through Javascript.
-
Multiple Grids
You can create multiple grids in one page just by puting the HTML and its javascript function again.
-
CSS3 Transitions
Take advantage of CSS3 Transformations like scale 3D for a better transition effects.
-
Captions
The name of the image will be its caption in the grid, there are some cool effects available for the captions.
-
Support
I offer you any free support concerning the Auto Albums - Multi Level Responsive Grid, I will help you any way I can.
-
API
Gives you full control over the grid, play, stop, nav, lightbox, etc., all through Javascript
-
Documentation
You can read the documentation for free here, and feel free to ask any question you may have.
Default Javascript Options
{
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?
}