Best jQuery Gallery Plugins & Tutorials with Demo

    Draggable Menu with Image Grid Previews

    Draggable Menu with Image Grid Previews

    A draggable inline menu with a scattered thumbnail preview of an image grid.After our little draggable image strip experiment, we wanted to explore using the dragging functionality on a menu. The idea is to show a large inline menu with some scattered thumbnails. The menu can be dragged and while doing so, the thumbnails get moved with an animation. Each menu item also changes the letters to show an outlined version. When clicking on the “explore” link under a menu item, the thumbnails move and enlarge to form a grid.

    Spotlight : Lightweight Image Gallery Plugin

    Spotlight : Lightweight Image Gallery Plugin

    Spotlight is a web’s most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.

    Spotlight runs out of the box:

    • No additional Javascript coding
    • No additional HTML snippets
    • No additional CSS resources
    • No additional images/assets
    • No additional handling of dynamic content and event listener

    Draggable Image Strip with TweenMax

    Draggable Image Strip with TweenMax

    A draggable image strip layout with a content preview powered by Draggabilly and TweenMax.. The idea is to show a strip of differently sized images that can be dragged. When clicking and holding to drag, a title element appears and the images get scaled. This separates the images and gives the whole thing an interesting look. When a number gets clicked, the same separation happens and then the images fly up. Another larger version of the images slides in from the bottom.

    Animated Image Columns with TweenMax

    Animated Image Columns with TweenMax

    An experimental web layout where several image columns get animated out when a menu item is clicked.The idea is based on the current trend of a grid layout where the columns are animated.  In our demo, we animate a decorative image grid and make the columns move away in an alternating way, revealing some content underneath. We use a playful hover effect for the menu items and mimic the animating when they fly away. We also added some slight mouse move interaction for the columns.

    Grid Reveal Effects with Anime.js

    Grid Reveal Effects with Anime.js

    Some experiments with the new staggering system of Anime.js where we try different effects for hiding and showing thumbnails in an image grid.

    Recently, a new version of anime.js was released. One of the great new features is its staggering system that makes complex follow through and overlapping animations really simple. We wanted to give it a try and experiment with this new feature on an image grid with many thumbnails.

    Ajaxable : Make your forms Instantly Ajaxable

    Ajaxable : Make your forms Instantly Ajaxable

    This library simply takes the standard HTML forms as an input and make them send requests via AJAX keeping HTML5 validations.

    Instagram Feed – jQuery Plugin to Embed Instagram Photos

    Instagram Feed - jQuery Plugin to Embed Instagram Photos

    This jQuery Plugin allows you to embed Instagram Feed of Instagram users into your sites. Moreover, this plugin is responsive and includes many options to customize the photos, buttons, etc.

    SampGallery : Simple jQuery Image Previewer

    SampGallery : Simple jQuery Image Previewer

    SampGallery is a simple jQuery image previewer gallery.

    Fullscreen Hover Loop Effect with CSS & TweenMax

    Fullscreen Hover Loop Effect with CSS & TweenMax

    Today we’d like to share a little artsy effect with you. The idea is to show a fast fullscreen preview of images when hovering over a special link. In our demo we use the concept of a photographer’s website where the link to their works triggers the effect. On hover, some photos are shown rapidly in a loop. Once the link is clicked, the current image scales down and moves to its place in the grid. The animations are made using TweenMax.

    Grid Layout with Scrollable Content View

    Grid Layout with Scrollable Content View

    Today we’d like to share a Masonry-powered grid layout with you that has a motion hover effect on the items and a content preview that is scrollable. Once a grid item is clicked, we animate the image to the center of the page and scale it up. The background of the item also scales up, filling the whole page and forming the new background of the content preview. The content preview is scrollable, with some more text showing beneath the image. The animations are powered by TweenMax.