A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.
Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".
Read more here: License
@codrops
Noticed that this was missing a key option - the ability to turn off the "Visit" button. Added in the functionality, and defaulted it to true to maintain the old behavior for anyone already using it.
Comments welcome, thanks!
Hi,
I am using a bootstrap template and want to use this plugin for showing extra info on products. I have got it working in the basics, but the og-expander never reaches 100% of the width of the items parent item.
I have tried with my thumbnail code based on div contianer with children div's and with an UL / LI sample code as in the sample, both without success.
How can I get the og-expander to be 100% of the items parent width.
I need two instances of the grid, thus I changed the grid variable to: var $grid = $( '.og-grid' ).
It all works as expected, but when I close the second instance, the upper part of the overlay doesn't close, leaving a black bar with the close icon. You can see it here: http://madebym.me/test/couch-test/corporate-video.php
Has anyone managed to sucesfully have two or more grids?
Hi there,
That's an awesome expanding preview! But I can't make it work with GridLoadingEffects (https://github.com/codrops/GridLoadingEffects).
The .og-expander appears but it's not of the full window width and also it appears underneath of the other li thumb-images (even if I set the z-index to million).
Any ideas, please?
Any Changes in DOM not working....
In HubSpot, My DOM is bit diff. to first, i need to make it same layout like as follows. But after this, t not works....
$(window).load(function(e) { $('li').wrapAll('
'); Grid.init(); });When click on an image it expands fine, and if I close it using a close button and re-expand another image it works fine as well.
however if click on a different thumbnail bellow the expanded view main image collapses behind thumbnails.
I have the grid working beautifully, but I'd like to be able to open a particular preview in code rather than through the usual user-click on the thumb. I can't seem to hit on the right method that works. Invoking a js click event on an anchor in the grid does not work, and I can't seem to find a method on Grid that is exposed to do this. Anybody know what I am missing?
is there a version of this with a sorting function? I have tried to use this with MixItUp, but seem to be having issues... the expanded preview still follows the next item in the list but not the next filtered item.
Full Image Reveal Effect A full image reveal effect with fancy thumbnail sliding. Article on Codrops Demo Credits Images from Unsplash.com TweenMax by
Image Tilt Effect A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to c
Segment Effect Background image segment effect as seen on Filippo Bello's Portfolio. Article on Codrops Demo License Integrate or build upon it for fr
Image Grid Motion Effect A motion hover effect for a background grid of images. Article on Codrops Demo Installation Install dependencies: npm install
Background Scale Hover Effect Recreation of the background scale hover effect seen on the DDD Hotel menu using CSS clip paths. Article on Codrops Demo
LiquidEffect Javascript Library for creating liquid effect on image and RGB effect on mouse direction. Demo https://liquideffect.netlify.app/ Dependen
Interactive Hover Effects with Three.js A simple tutorial on how to achieve an interactive mouseover/hover effect on images in some easy steps. Articl
Crosshair Mouse Cursor Distortion Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hov
Magnifier.js Javascript library enabling magnifying glass effect on an images. Demo and documentation Features: Zoom in / out functionality using mous
Animated Heat Distortion Effects with WebGL A tutorial on how to use fragment shaders in WebGL to create an animated heat haze distortion effect on im
vintageJS Add a retro/vintage effect to images using the HTML5 canvas element. Installation $ npm install vintagejs How to use vintagejs is a functio
jQuery.BgSwitcher Switch the background image with using effect. Demo http://rewish.github.io/jquery-bgswitcher/ Usage <div class="box"> <p>Lorem ip
imagehover.css A Scaleable & Light Image Hover CSS Library Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scaleable
How to Create a Sticky Image Effect with Three.js A sticky image effect for a slideshow inspired by ultanoir's project showcase slideshow. Article on
Diaporama Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions
react-native-kenburns-view KenBurns Image Effect for React Native. Based on Image Component Image Component. Version: 4.1.0 Tested on React Native 0.6
Motion Transition Effect A speedy motion transition effect for an image slideshow. Inspired by Ping Pong Slow Motion. Article on Codrops Demo Credits
Image Trail Effects A set of effects for mouse-following image trails that show a random series of images. Inspired by the effect seen on VLNC Studio.
Warp drive jQuery plugin (jquery-warpdrive-plugin) Preview Description Warp drive is a lightweight jQuery plugin that helps you create a cool, interac
155 Dec 19, 2022
8 May 6, 2022
246 Dec 27, 2022
808 Dec 18, 2022
289 Nov 1, 2022
829 Dec 25, 2022
195 Dec 30, 2022
1.8k Dec 21, 2022
198 Nov 18, 2022
797 Nov 26, 2022
58 Sep 3, 2022
51 Nov 15, 2022