In today’s tutorial we will create a simple and beautiful slideshow gallery with jQuery that can be easily integrated in your web site. The idea is to have a container with our slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. The thumbnail grid will slide out from the top and allow the user to navigate through a set of thumbnails.
Best jQuery Grid Plugins & Tutorials with Demo
Responsive Slideshow Photo Gallery Grid with Html5
The Responsive Slideshow Photo Gallery has a fluid / flexible / responsive layout. Basically the grid is added into a html page into a div of your chosing and it’s adapting based of that div’s width, the grid height is modified based on the number of thumbnails and if other elements are below the grid div they will be pushed down automatically (document flow). In the examples provided you can see a few ways in which you might use this grid, of course that other configurations are possible.
Pure OOP JavaScript code, no usage of jQuery or other libraries, in this way there will be no incompatibilities with HTML pages that might be using jQuery or other JavaScript libraries.
The Responsive Slideshow Photo Gallery is using the GPU (hardware acceleration) using HTML5 standards. The rendering speed and performance is impeccable on desktop computers and most importantly on mobile devices, the way it works it will try to use CSS3 and if this is not available it will down fall to CSS2 or CSS1 for older browsers like IE7 and IE8.
Megafolio Pro Responsive Grid jQuery Plugin
Megafolio Pro is a fully responsive media grid plugin that allows you to display content in almost every way possible using preset or randomly generated layouts. Dive right into the action by taking a look at our previews, showcasing just a few examples of whats possible with Megafolio Pro!
Features:
- Tons of options
- Fully Responsive & Mobile Optimized (Smartphones & Tablets)
- Customizable Grid Layouts
- Various Transitions & Effects
- Category Filter Styles
- Fast CSS3 & jQuery Engine
- The Perfect Solution for all Grid Based Applications
- Fancybox 2 Lightbox Plugin
jQuery Sticky Captions Concept with CSS3
When creating thumbnail grids, we usually want to show image captions on hover to provide more information about the item. Image captions are usually shown in a very specific part of the thumbnail, either on the top, the middle or the bottom. When adding captions to the bottom of a thumbnail it can happen that a thumbnail that is overflowing the viewport (i.e. is partly beyond the “fold”) is being hovered but the caption won’t be seen because it appears on the bottom part of the image that is not visible. The user would have to scroll the page in order to see the bottom of the item and eventually the caption.
A small trick can solve that problem by simply making the caption “sticky”. This would mean that the caption will be visible not only at the bottom of every thumbnail but also in any place, sticking at the bottom of the page, if the thumbnail hovered is overflowing the current view.
OneMenu : jQuery Responsive Metro UI Menu
OneMenu is a jQuery navigation menu plugin that is created for Metro UI themes. OneMenu supports responsive design, unlimited menus.
Features:
- Responsive Design for Metro Themes
- Unlimited Menus.
- Unlimited Items in OneMenu.
- Works on Aalmost Platforms.
- Auto align items in Dynamic Grid.
- Light weight.
- Easy Customiztion.
Shapeshift : jQuery plugin for dynamic grids with drag and drop
ShapeShift is a jQuery plugin which helps you to create a dynamic grid system with awesome multi-column drag and drop functionality.This jQuery plugin will dynamically arrange a collection of elements into a grid in their parent container.Inspired heavily by the jQuery Masonry plugin.
Another great feature is masonry installed so that when resizing ,the grid to accomodate for more or less space is automatically turned on in this jquery plugin, so if your parent container has a 100% grid resizing the window will shapeshift the child objects around to accomodate for the new layout.
Volley : jQuery plugin for Dividing and Filtering elements
jQuery plugin for dividing and filtering elements based on their visual position. You can use it for running sequential animations on items.Volley requires all elements to be positioned in a grid, i.e. their widths and heights has to match (otherwise there is no point for calling volley really).Starting point for dividing items. By setting different starting point you can divide items into horizontal, vertical, or diagonal rows.
Calendario: A Flexible jQuery Calendar Plugin
Today we want to share a flexible calendar concept with you. Calendars can be a very tricky thing when it comes to their layout and responsiveness. This is an experiment for trying out some grid layouts that can be applied to calendars. We’ve created a jQuery plugin for the calendar itself and you can see some examples of how to use it in the demos. The aim is to provide a suitable layout for both, small and big screens and keeping the calendar structure fluid when possible. On large screens we want to show a grid-based layout while on smaller screens, we want to simply stack the days of the month.
