🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL
  1. Home
  2. jQuery Plugins
  3. Thumbnail Grid with Expanding Preview in jQuery & CSS

Thumbnail Grid with Expanding Preview in jQuery & CSS

A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.If you have searched images on Google recently, you might have noticed the interesting expanding preview for a larger image when you click on a thumbnail. It’s a really nice effect and it is very practical, making a search much easier. Today we want to show you how to create a similar effect on a thumbnail grid. The idea is to open a preview when clicking on a thumbnail and to show a larger image and some other content like a title, a description and a link.The interesting part is to calculate the correct preview height and to scroll the page to the right position. We’ll expand the preview in a way so that we can see the respective thumbnail row and cover the rest of the remaining page. Note that we don’t use very large images for the preview in the demo so you might see a lot of empty space on large monitors.

CSS Gallery
Demo Tutorial

You May Also Like

jQuery Mobile Toggle Menu With CSS3 Media Queries - Biggie

Cool jQuery Slider Plugin with CSS3 Animations - Wiper

jQuery Plugin For Sakura Petals Falling Animation - Sakura

jQuery Plugin For Image Hover Transition Effect - hoverTransition

Simple jQuery Vertical Accordion with CSS3 Transitions

Basic jQuery Content Rotator Plugin - Rotation.js

Simple 3D Flipping Cube Slideshow with jQuery and CSS3 - BoxRoll Slider

jQuery Plugin To Reveal Hidden Content with CSS3 Transitions - Menumucil

Simple Clean jQuery & CSS3 Carousel Slider Plugin - CSS Slider

Flexible & Mobile-first Slider with CSS3 Transitions - Wallop Slider

Fullscreen jQuery Image Scroller with CSS3 Transitions - Assisted Scroll

Simple Clean jQuery & CSS3 Based Tooltip Plugin - Pop

Retina Ready jQuery Color Picker with CSS3 Gradients - Iris

Minimal Responsive Content Slider with jQuery and CSS3 - Stupid Slider

jQuery Cover Flow-Like List Animation Plugin - skywheel

Simple Multi-Item Slider with CSS Animation - ItemSlider

Create Custom Rotate Animations with jQuery and CSS3

Fancy Scroll Animations with jQuery and Animate.css - byscroll

Responsive Content Slider Plugin with jQuery and Animate.css

jQuery Plugin For On-Scroll Animations using Animate.css - Animated

jQuery Plugin For Manipulating Animate.CSS Based Animations - animakWix

Animate Html Elements with jQuery and animate.css - Animate-Plus.js

jQuery Plugin To Apply Animate.css Animations To Elements On Scroll - Animated

jQuery Plugin For Form Validation Animations Using Animate.css

Minimal Text Carousel Plugin With JQuery and Animate.css - Slogan Roulette

jQuery Plugin For Magical Scroll Animations Using CSS3 - scroll-animate

Simple Animated Timeline Plugin For jQuery - Timelify

jQuery Plugin To Handle Animate.css Powered CSS3 Animations

jQuery Plugin For Custom CSS3 Powered Animations - k-animation

Responsive & Flexible jQuery Lightbox Plugin - Nivo Lightbox

jQuery Plugin To Handle Animate.css Powered CSS3 Animations - aniAuto

Apply CSS Animations To Elements On Scroll - jQuery Toanimate.js

Smooth Animated Numbers with Javascript and CSS3 - odometer

Minimal jQuery Plugin To Control Animate.css Animations - Animator

jQuery Plugin To Apply Animate.css Animations On Page Load - anim-js

Enable Animations When Content Comes Into View - jQuery scroll-animate.js

Controlling CSS3 Animations With jQuery - Animate.js

jQuery Plugin To Manage Animate.css Based Animations - animate.css.js

jQuery Plugin For Configurable Animate.css Powered Animations - animateCSS

jQuery Animated DOM Elements with CSS3 Transitions - CSSAnimate

Create Custom Hover Effects On Images - jQuery picBeautifier-3000

gips - Beautiful and Clean Tooltip Plugin

Reveal Elements With CSS3 Animations When Scrolling - jQuery Revealer

Powerful & Interactive Tooltip Plugin with jQuery - Protip

Animate Element Into View Using CSS3 Animations - jQuery anisview.js

xBreadcrumbs jQuery Plugins with Demo

Thumbnails Preview Slider with jQuery

B&W Box jQuery Gallery with Demo

Cool jQuery animation effect gallery with Demo

Create A Organic Tabbed Interface Using jQuery with Demo

Create a Slick Tabbed Content Area using CSS & jQuery with Demo

Sexy Drop Down Menu with jQuery & CSS

Sweet Thumbnails Preview jQuery Gallery with Demo

Perfect signin dropdown box likes Twitter with jQuery

jQuery Tiny Carousel with Demo

Simple Toggle with CSS & jQuery

AviaSlider jQuery slideshow Plugin with Demo

Style-my-tooltips jQuery plugin with Demo

Contactable – A jQuery Plugin with Demo

Fancy jQuery Sliding Form with Demo

jQuery Moving Tab and Sliding Content Tutorial with Demo

Client Testimonials Powered by PHP, XML and jQuery with Demo

jQuery Typing Game with Demo

Neat Photo Hover Effect with CSS Sprites and jQuery

Simple jQuery Flickr Style Tooltip Menu with Demo

Facebook Style Loading Bar Using CSS and jQuery

jQuery Expand Stacked Images Using Slider with Demo

How To Create a Cool Animated Menu with jQuery

Digg Like URL Submitter Using jQuery and PHP with Demo

How to Make Auto-Advancing Slideshows with jQuery & HTML5

jQuery Plugins

AngularJs Plugins