Featured jQuery plugin that permits you to show all form of content material in a extremely highly effective grid. Use it for weblog posts, show media, shoppers, portfolios, purchasing carts, galleries and all you’ll be able to think about.
it comes with a robust filter, sorting and search system!
You possibly can put the plugin in your current HTML/CSS and it’ll robotically adapt to its container, additionally you’ll be able to rapidly customise it by way of CSS and HTML so it adapts to your wants.
The plugin gives you tons of choices for filtering:
- Outline your individual HTML markup for the filter
- Apply your individual CSS fashion to the filter
- Add any variety of filters
- Goal a number of containers
- Goal some containers and exclude others
- Add a number of classes to the containers (belong to a number of classes)
- Use any jQuery selector
- A number of filters, mixed with the search and kind characteristic
The plugin gives you the choice to look within the present structure so yow will discover objects in a short time, simply specify what components you need to goal with the looking.
When you have a filter it’ll work along with the search characteristic, the popup and the load extra characteristic will absorb rely this filtering as effectively.
Kind the structure in actual time, you should utilize textual content, numbers and even prolong it on your personal needs. Make your individual sorting choices, there’s no restrict.
You possibly can specify for every thumbnail that for sure width you need sure top and the plugin will minimize the peak for you (relying on the decision, this works because the ratio). That is very helpful if you need all of your thumbnails to have the identical dimensions.
In case you specify the ratio of the thumbnails (width x top) the plugin will present you the structure and the content material with none delay, then it’ll load every thumbnail individually (displaying a loading wheel) so it’ll really feel just like the plugin masses sooner (like within the demo).
The plugin is utilizing Isotope v2 which is at the moment one of many quickest grid methods with filtering on the market. Additionally it makes use of the very best browser options when obtainable (CSS3 transitions and GPU acceleration) and a fallback of easy animation for older browsers
You possibly can outline the grid structure (the variety of columns or the width) for various resolutions, for instance perhaps you need just one column for a cell decision, three columns for a pill decision and 5 columns for a desktop decision.
One field can prolong throughout a number of columns (often 2), you solely must specify it, however play rigorously with this feature since in some resolutions you could discover gaps between containers as a result of it might not match completely on a regular basis (in line with Isotope logic).
The plugin is utilizing the Magnific Popup which is a responsive lightbox & dialog script with give attention to efficiency and offering greatest expertise for person with any system.
You possibly can load a whole lot of stuff within the popup like photos, movies, sounds, iframes, HTML textual content, Google maps and ajax content material (It doesn’t help video/sound information like .mp4 or .mp3, they have to be iframe based mostly, like in Youtube or SoundCloud)
Yow will discover loads of help in google since it’s a extremely popular popup, for instance so as to add swipe help or many different options.
Immediately hyperlink to the popup so you’ll be able to share the popup content material with your pals or in your social community, simply copy and paste the URL generated if you open the popup.
- Totally responsive grid and popup
- Deep linking
- Lazy load Characteristic
- One of many quickest grids on the market
- Configure the structure for various resolutions
- A number of columns
- Limitless variety of objects
- The popup helps photos, movies, sounds, iframes, HTML textual content, Google maps and ajax content material of any dimensions and it’ll hold the fitting proportions
- Highly effective filtering system
- Looking out system
- Sorting characteristic
- Retina prepared icons
- Set the variety of containers to load at begin and if you click on the “load extra” button
- Help thumbnails for the grid solely to the pictures you need to enhance efficiency
- Outline the ratio of your thumbnails
- Auto cuts the peak of the thumbnails with CSS methods (if ratio outlined)
- Full width, the grid will adapt to the 100% of its container in the event you set the width of every column to ‘auto’
- You possibly can specify a static width for every column or specify variety of columns
- Change the portfolio structure for various resolutions
- CSS3 Results and GPU acceleration
- Tons of overlay results
- Straightforward implementation
- Suitable with Twitter Bootstrap
- Totally customizable and adaptable to your wants
- Free Technical Help
I’ve used the next icons and scripts
- Font Superior
- Isotope v2 ($25 developer license)
- Magnific Popup
- Different JS scripts that yow will discover within the JS folder
v3.1 – October 29, 2016
- Fastened and situation with the iframe-on-grid characteristic within the media_grid instance
v3.1 – September 30, 2016
- If you wish to have the dropdown menu (the one used for filtering or sorting) open if you click on on it as an alternative of if you put the mouse over, it is advisable to add this attribute: data-event=”click on” to the div with the category of “media-boxes-drop-down”
- Now you can too use OR logic when utilizing a number of filters, you’ll be able to set this with a brand new JS possibility named “multipleFilterLogic” (test the docs)
- When utilizing a number of filters, if you need them to be unbiased from one another add this peace of JS BEFORE the JS initialization of the media containers and AFTER jQuery:
$('*[data-filter]:not(*[data-filter="*"]').on('click on', operate(e) var current_all_filter = $(this).mother and father('ul').discover('*[data-filter="*"]'); $('*[data-filter="*"]').not(current_all_filter).set off('click on'); );
v3.zero – August 04, 2016
- New design on the reside preview
- Improve to newest variations of isotope, imagesLoaded, magnific popup and all parts used
- Now could be suitable with jQuery v3
- search engine optimization on the thumbnails, simply search for the “Add search engine optimization” part within the documentation
- Modified the trail to the parts used within the plugin, so it’s simpler to improve, test the “Together with information” part within the docs
- Choice “showOnlyLoadedBoxesInPopup” modified to “showOnlyVisibleBoxesInPopup”
- Modified how the popup photos are specified so you’ll be able to have as many as you need in a single field, test the “Popup” part within the docs
- The video-on-grid class modified its location together with the popup attributes, so simply test the “Helpful Stuff” part within the docs
- The “type” and “filter” JS setting aren’t longer wanted, since now it robotically appears to be like for the weather with “data-filter” or “data-sort-by” attribute and makes use of them
- Now you can too use a “choose” component for filtering, simply discover the “Use a choose as filter” part within the docs
- Modified the deep linking hash of the popup from mb= to (grid|popup)= you’ll see it in motion within the hash when utilizing the brand new model
Deep Linking on filters and search is now attainable!
the JS possibility named “deeplinking” was changed by:
- deepLinkingOnPopup: true,
- deepLinkingOnFilter: true,
- deepLinkingOnSearch: false,
- Now you’ll be able to move the “horizontalSpaceBetweenBoxes” and “verticalSpaceBetweenBoxes” settings within the resolutions JS setting, so you’ll be able to have completely different house between containers relying on the decision you’ve gotten, test the “resolutions” JS setting within the docs
v2.eight – August 23, 2015
- Fastened a problem with the dropdown menu on cell
v2.7 – August 17, 2015
- Added new contemporary examples
- Fastened some bugs and added some search engine optimization optimization
v2.6 – Jan 11, 2015
- Fastened some bugs with the loading operate
v2.5 – Oct 16, 2014
- Fastened some bugs with Firefox concerning the drop down menu
- Fastened some bugs with the filtering and the ‘minimal containers per filter’ characteristic
- Fastened some JS logic
- Improved the usability of the drop down menu on cell browsers
v2.four – July eight, 2014
- Change the picture icons for retina icons (Font Superior)
- Added a drop down for sorting and filtering
- Added sorting examples
v2.three – July 7, 2014
- Added search characteristic
- Added sorting characteristic
v2.2 – July 2, 2014
- Added an possibility named “considerFilteringInPopup” so the popup exhibits solely containers from the filter specified, that is true by default now.
- Modified the namespace of the imagesLoaded plugin since it could crash with the previous model of isotope (if included in the identical web page)
v2.1 – June 28, 2014
- Added deep linking
v2.zero – June 25, 2014
- it’s a completely new plugin
- all of the logic behind modified
- CSS fashion modified
- HTML markup modified
- choices modified
- be sure to learn the docs earlier than you improve
v1.zero – September 25, 2013
- preliminary launch
You possibly can have a look to the documentation HERE