Media Bins Portfolio is a featured jQuery grid plugin that means that you can show all form of content material in a extremely highly effective grid. Use it for weblog posts, show media, purchasers, portfolios, procuring carts, galleries and all you possibly can think about.
it comes with a strong 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 possibly can shortly customise it through 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 packing containers
- Goal some packing containers and exclude others
- Add a number of classes to the packing containers (belong to a number of classes)
- Use any jQuery selector
- A number of filters, mixed with the search and type function
The plugin gives you the choice to go looking within the present format so yow will discover objects in a short time, simply specify what parts you need to goal with the looking.
In case you have a filter it would work along with the search function, the popup and the load extra function will soak up depend this filtering as properly.
Type the format in actual time, you should use textual content, numbers and even prolong it in 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 lower the peak for you (relying on the decision, this works because the ratio). That is very useful once you need all of your thumbnails to have the identical dimensions.
Should 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 would load every thumbnail individually (exhibiting a loading wheel) so it would really feel just like the plugin masses quicker (like within the demo).
The plugin is utilizing Isotope v2 which is presently one of many quickest grid techniques 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 straightforward animation for older browsers
You possibly can outline the grid format (the variety of columns or the width) for various resolutions, for instance possibly you need just one column for a cellular decision, 3 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 chances are you’ll discover gaps between packing containers as a result of it could not match completely on a regular basis (in keeping with Isotope logic).
The plugin is utilizing Fancybox and the Magnific Popup that are very fashionable and highly effective lightboxes/popups.
You possibly can load loads of stuff within the popup like pictures, movies, sounds, iframes, HTML textual content, Google maps and ajax content material (It doesn’t help video/sound recordsdata like .mp4 or .mp3, they should be iframe primarily based, like in Youtube or SoundCloud)
You’ll find loads of help in google since it’s a very fashionable popup, for instance so as to add swipe help or many different options.
Instantly hyperlink to the popup so you possibly can share the popup content material with your pals or in your social community, simply copy and paste the URL generated once you open the popup.
- Totally responsive grid and popup
- Deep linking
- Lazy load Function
- One of many quickest grids on the market
- Configure the format for various resolutions
- A number of columns
- Limitless 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 preserve the precise proportions
- Highly effective filtering system
- Looking out system
- Sorting function
- Retina prepared icons
- Set the variety of packing containers to load at begin and once you click on the “load extra” button
- Assist 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 strategies (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 format for various resolutions
- CSS3 Results and GPU acceleration
- Tons of overlay results
- Straightforward implementation
- Appropriate with Twitter Bootstrap
- Deactivate and Activate Options by means of Javascript Choices
- Totally customizable and adaptable to your wants
- Free Technical Assist
I’ve used the next icons and scripts
- Font Awesome
- Isotope v2 ($25 developer license)
- Magnific Popup
- Different JS scripts that yow will discover within the JS folder
v3.7.4 – March 17, 2021
- Up to date the elements
- Fastened subject when utilizing OR mixed with the search discipline
- Fastened minor bugs
- Now the plugin ships with the newest jQuery model
v3.6 – February 01, 2020
- Up to date the JS file, cleaned up the code
- Repair a wierd bug with the primary merchandise when a default filter apart from all was chosen
- Waypoints will not be longer wanted, now you have to embody 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 not black bars on the high and backside
- Up to date all of the elements to the newest model
- Minor JS enhancements
v3.3 – August 10, 2017
- New popup/lightbox as arrived to the Media Bins, which may be very contact pleasant and comes with superior options (like thumbnail view, fullscreen, and so forth), you possibly can nonetheless use Magnific Popup although, so you will have 2 popup plugins now, select the one you like!
- New sorting looking instruments
- Up to date some elements
- Minor JS enhancements
v3.2 – March 10, 2017
- Added some acceleration to the results and glued 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 distinct file named “jquery.mediaBoxes.dropdown.js” so its simpler to keep up, you’ll solely want so as to add it alongside the opposite recordsdata, test it out here
v3.1 – November 3, 2016
- Repair and subject with the popup when including packing containers through JS/Ajax
v3.1 – October 29, 2016
- Fastened and subject 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 once you click on on it as a substitute of once you put the mouse over, it’s good to add this attribute: data-event=”click on” to the div with the category of “media-boxes-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 “multipleFilterLogic” (verify the docs)
- When utilizing a number of filters, if you would like them to be impartial from one another add this peace of JS BEFORE the JS initialization of the media packing containers and AFTER jQuery:
$('*[data-filter]:not(*[data-filter="*"]').on('click on', operate(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 stay preview
- Improve to newest variations of isotope, imagesLoaded, magnific popup and all elements used
- Now’s suitable with jQuery v3
- website positioning on the thumbnails, simply search for the “Add website positioning” part within the documentation
- Modified the trail to the elements used within the plugin, so it’s simpler to improve, verify the “Together with recordsdata” part within the docs
- Choice “showOnlyLoadedBoxesInPopup” modified to “showOnlyVisibleBoxesInPopup”
- Modified 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 “Useful Stuff” part within the docs
- The “type” and “filter” JS setting should not longer wanted, since now it robotically seems to be for the weather with “data-filter” or “data-sort-by” attribute and makes use of them
- Now you may also 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 doable!
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 packing containers relying on the decision you will have, verify the “resolutions” JS setting within the docs
v2.8 – August 23, 2015
- Fastened a difficulty with the dropdown menu on cellular
v2.7 – August 17, 2015
- Added new recent examples
- Fastened some bugs and added some website positioning 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 packing containers per filter’ function
- Fastened 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 Superior)
- 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 “considerFilteringInPopup” so the popup exhibits solely packing 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.0 – June 25, 2014
- it’s a completely new plugin
- all of the logic behind modified
- CSS fashion modified
- HTML markup modified
- choices modified
- make certain to learn the docs earlier than you improve
v1.0 – September 25, 2013
- preliminary launch
You possibly can have a look to the documentation HERE
