Media Boxes Portfolio - JQuery Grid Gallery Plugin

Media Boxes Portfolio – jQuery Grid Gallery Plugin

Media Boxes Portfolio - jQuery Grid Gallery Plugin - 2

Media Boxes Portfolio - jQuery Grid Gallery Plugin - 3

Media Boxes Portfolio is a featured jQuery grid plugin that permits you to show all sort of content material in a extremely highly effective grid. Use it for weblog posts, show media, shoppers, portfolios, purchasing carts, galleries and all you possibly can think about.

it comes with a robust filter, sorting and search system!

You can put the plugin in your present HTML/CSS and it’ll robotically adapt to its container, additionally you possibly can rapidly customise it through CSS and HTML so it adapts to your wants.

very powerful filter system

The plugin offers you tons of choices for filtering:

Define your individual HTML markup for the filter
Apply your individual CSS model to the filter
Add any variety of filters
Target a number of bins
Target some bins and exclude others
Add a number of classes to the bins (belong to a number of classes)
Use any jQuery selector
Multiple filters, mixed with the search and type function

search system

The plugin offers you the choice to go looking within the present format so yow will discover objects in a short time, simply specify what components you wish to goal with the looking.

If you’ve gotten a filter it’s going to work along with the search function, the popup and the load extra function will soak up rely this filtering as nicely.

sort system

Sort the format in actual time, you need to use textual content, numbers and even lengthen it on your personal needs. Make your individual sorting choices, there’s no restrict.

Specify the ratio of your thumbnails

You can specify for every thumbnail that for sure width you need sure top and the plugin will lower the peak for you (relying on the decision, this works because the ratio). This could be very helpful while you need all of your thumbnails to have the identical dimensions.

Stop waiting for all the thumbnails to load

If you specify the ratio of the thumbnails (width x top) the plugin will present you the format and the content material with none delay, then it’s going to load every thumbnail individually (displaying a loading wheel) so it’s going to really feel just like the plugin masses sooner (like within the demo).

One of the fastest grids out there

The plugin is utilizing Isotope v2 which is at the moment one of many quickest grid programs with filtering on the market. Also it makes use of the perfect browser options when out there (CSS3 transitions and GPU acceleration) and a fallback of straightforward animation for older browsers

Configure the layout for different resolutions

You can outline the grid format (the variety of columns or the width) for various resolutions, for instance perhaps you need just one column for a cellular decision, 3 columns for a pill decision and 5 columns for a desktop decision.

Multiple Columns

One field can lengthen throughout a number of columns (often 2), you solely have to specify it, however play rigorously with this feature since in some resolutions it’s possible you’ll discover gaps between bins as a result of it might not match completely on a regular basis (in keeping with Isotope logic).

One of the best Popups - Lightbox

The plugin is utilizing Fancybox and the Magnific Popup that are highly regarded and highly effective lightboxes/popups.

You can load a variety of stuff within the popup like pictures, movies, sounds, iframes, HTML textual content, Google maps and ajax content material (It doesn’t assist video/sound information like .mp4 or .mp3, they have to be iframe based mostly, like in Youtube or SoundCloud)

You can discover loads of assist in google since it’s a highly regarded popup, for instance so as to add swipe assist or many different options.

Deep linking

Directly hyperlink to the popup so you possibly can share the popup content material with your folks or in your social community, simply copy and paste the URL generated while you open the popup.

what customers are saying

features list

Fully responsive grid and popup
Deep linking
Lazy load Feature
One of the quickest grids on the market
Configure the format for various resolutions
Multiple columns
Unlimited variety of objects
The popup helps pictures, movies, sounds, iframes, HTML textual content, Google maps and ajax content material of any dimensions and it’ll hold the best proportions
Powerful filtering system
Searching system
Sorting function
Retina prepared icons
Set the variety of bins to load at begin and while you click on the “load extra” button
Support thumbnails for the grid solely to the photographs you wish to enhance efficiency
Define the ratio of your thumbnails
Auto cuts the peak of the thumbnails with CSS strategies (if ratio outlined)
Full width, the grid will adapt to the 100% of its container if you happen to set the width of every column to ‘auto’
You can specify a static width for every column or specify variety of columns
Change the portfolio format for various resolutions
CSS3 Effects and GPU acceleration
Tons of overlay results
Easy implementation
Compatible with Twitter Bootstrap
Deactivate and Activate Features by way of Javascript Options
Fully customizable and adaptable to your wants
Free Technical Support

credits

I’ve used the next icons and scripts

Font Awesome
Isotope v2 ($25 developer license)
Magnific Popup
Other JS scripts that yow will discover within the JS folder

changelog

v3.7.4 – March 17, 2021

Updated the parts
Fixed challenge when utilizing OR mixed with the search area
Fixed minor bugs
Now the plugin ships with the newest jQuery model

v3.6 – February 01, 2020

Updated the JS file, cleaned up the code
Fix an odd bug with the primary merchandise when a default filter aside from all was chosen
Waypoints will not be longer wanted, now you have to embrace a JS file named “jquery.seen.min.js”

v3.5 – March 26, 2019

Now the thumbnails which have ratio specify will adapt to the 100% of the container, so now not black bars on the prime and backside
Updated all of the parts to the newest model
Minor JS enhancements

v3.3 – August 10, 2017

New popup/lightbox as arrived to the Media Boxes, which could be very contact pleasant and comes with superior options (like thumbnail view, fullscreen, and many others), you possibly can nonetheless use Magnific Popup although, so you’ve gotten 2 popup plugins now, select the one you favor!
New sorting looking instruments
Updated some parts
Minor JS enhancements

v3.2 – March 10, 2017

Added some acceleration to the consequences and stuck some flickering
New JS strategies for insert and refreshing the grid, verify them out here
The JS logic for the dropdown filter now its on a unique file named “jquery.mediaBoxes.dropdown.js” so its simpler to keep up, you’ll solely want so as to add it alongside the opposite information, test it out here

v3.1 – November 3, 2016

Fix and challenge with the popup when including bins through JS/Ajax

v3.1 – October 29, 2016

Fixed and challenge with the iframe-on-grid function 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 while you click on on it as a substitute of while you put the mouse over, you’ll want to add this attribute: knowledge-occasion=”click on” to the div with the category of “media-bins-drop-down”
Now you may also use OR logic when utilizing a number of filters, you possibly can set this with a brand new JS choice named “a number ofFilterLogic” (verify the docs)

When utilizing a number of filters, if you’d like them to be impartial from one another add this peace of JS BEFORE the JS initialization of the media bins and AFTER jQuery:

$('*[data-filter]:not(*[data-filter="*"]').on('click on', perform(e){
    var current_all_filter = $(this).dad and mom('ul').discover('*[data-filter="*"]');
    $('*[data-filter="*"]').not(current_all_filter).set off('click on');
});

v3.0 – August 04, 2016

New design on the reside preview
Upgrade to newest variations of isotope, imagesLoaded, magnific popup and all parts used
Now is suitable with jQuery v3
search engine marketing on the thumbnails, simply search for the “Add search engine marketing” part within the documentation
Changed the trail to the parts used within the plugin, so it’s simpler to improve, verify the “Including information” part within the docs
Option “showOnlyLoadedBoxesInPopup” modified to “showOnlyVisibleBoxesInPopup”
Changed how the popup pictures are specified so you possibly can have as many as you need in a single field, verify the “Popup” part within the docs
The video-on-grid class modified its location together with the popup attributes, so simply verify the “Handy Stuff” part within the docs
The “kind” and “filter” JS setting aren’t longer wanted, since now it robotically appears for the weather with “knowledge-filter” or “knowledge-kind-by” attribute and makes use of them
Now you may also use a “choose” ingredient for filtering, simply discover the “Use a choose as filter” part within the docs
Changed 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 choice named “deeplinking” was changed by:
- deepLinkingOnPopup: true,
- deepLinkingOnFilter: true,
- deepLinkingOnSearch: false,
Now you possibly can move the “horizontalSpaceBetweenBoxes” and “verticalSpaceBetweenBoxes” settings within the resolutions JS setting, so you possibly can have totally different house between bins relying on the decision you’ve gotten, verify the “resolutions” JS setting within the docs

v2.8 – August 23, 2015

Fixed a difficulty with the dropdown menu on cellular

v2.7 – August 17, 2015

Added new recent examples
Fixed some bugs and added some search engine marketing optimization

v2.6 – Jan 11, 2015

Fixed some bugs with the loading perform

v2.5 – Oct 16, 2014

Fixed some bugs with Firefox concerning the drop down menu
Fixed some bugs with the filtering and the ‘minimal bins per filter’ function
Fixed some JS logic
Improved the usability of the drop down menu on cellular browsers

v2.4 – July 8, 2014

Change the picture icons for retina icons (Font Awesome)
Added a drop down for sorting and filtering
Added sorting examples

v2.3 – July 7, 2014

Added search function
Added sorting function

v2.2 – July 2, 2014

Added an choice named “contemplateFilteringInPopup” so the popup exhibits solely bins from the filter specified, that is true by default now.
Changed the namespace of the imagesLoaded plugin since it might crash with the previous model of isotope (if included in the identical web page)

v2.1 – June 28, 2014