Multi Purpose Media Boxes – A Responsive Grid of Images, Youtube / Vimeo Videos, Iframes and HTMLEverything you need in a Media Grid!
This is a HTML | CSS | JQuery Fully Responsive Portfolio in a pinterest style with a lightbox. It will adapt to the width of its container so you can put it anywhere and you can put anything inside the boxes. Also you don’t have to load all the images at once (for performance purposes) so you can specify the number of images to load when it first load and the number of images to load when you click the “load more images” button.
The navigation filter bar is generated automatically from the categories you specify to each image.
What You Can Do:
- Use it like in the live preview to show your posts with images, Youtube / Vimeo videos and a caption box below.
- Use it as a gallery (only showing images).
- Use it as a Youtube / Vimeo grid (only showing videos).
- Use it as a text grid (only showing HTML text).
- Put anything inside the boxes, each box is independent so you can put in one box just an image, in another a Youtube video, in other one a Vimeo video and a box caption below, etc. make any combination you want!
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).
- Fully responsive grid and lightbox
- Lazy Load Feature
- The Lightbox Support images and iframes of any dimensions and it will keep the right proportions
- The filter navigation bar is generated automatically from the categories you specify to each thumbnail
- Set the number of images to load at start and when you click the “load more images” button
- Support thumbnails for the grid only to the images you want to improve performance
- Fully Responsive Grid and Lightbox
- Full width, the grid will adapt to the 100% of its container if you set the width of each column to ‘auto’
- You can specify a static width for each column or specify number of columns
- When specifying the number of columns you can set the minimum width for each column
- CSS3 Effects
- Direction aware hover effect
- Lightbox with slideshow (play, pause, auto-play)
- Easy implementation
- Compatible with Twitter Bootstrap
- Bootstrap is not be required
- You can link to another page when you click in a thumbnail
- Free Technical Support
----> Update: Nov 26, 2013 Changed the HTML markup for an easier one Added more examples and themes ----> Update: October 17, 2013 Fixed some issues with the lightbox in Firefox when resizing the window
You can take a look to the documentation HERE