Thumbnail Grid with Expanding Preview

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.

The href value will be used to construct the link in the preview description (this also comes in handy when JavaScript is disabled). The data-largesrc attribute contains the path to the larger image. data-title and data-description contain the title and description, respectively.

When we click on a thumbnail, we want a preview element to appear under the list item. For that we will need to insert an element into the grid. In fact, we will use the list item itself and add the preview element after the anchor:

The CSS

Note that the CSS will not contain any vendor prefixes, but you will find them in the files.

So, let’s start with the thumbnail grid. It will be full width and we’ll center the text. In this case this will mean that it will center the thumbnails because we’ll set them to display: inline-block:

The details wrapper will have some padding and we’ll center the image inside of the image wrapper by setting the text-align to center and the image itself to display: inline-block. The image will also have a max-height and max-width of 100% so that it adjusts its size to the surrounding container:

The loading element will be in the same container as the image and we’ll not use any images but this CSS-only technique. We’ll create a little circle and set three box shadows: one for making the circle itself look a bit smoother and two for “copying” the element. Then we create an animation that will change the background color and the box shadow colors sequentially:

Last, but not least, we’ll add two media queries for adjusting the text a bit and for hiding the full image once the screen gets so small that the preview image is not really useful anymore (we’ll also not load it in the JavaScript then).

We will bind the click event for each item (anchor) and for the close button (when the item is opened). When we click on an item, the preview with the large image source and the details will be revealed or hidden if already shown. If we click the close button (cross) on the preview then this preview will be closed too.
We are also binding the resize event for the window, where some values are reset and the preview gets closed (if opened).

With the showPreview function we will basically initialize the Preview object, which in turn will expand and reveal the details and the large version of the image. If a Preview instance is already initialized then we will only update the preview with the new details (if the clicked item is in the same row as the current expanded item) or hide it and initialize / open a new one (if not in the same row).
In order to check if the items are in the same row as the current preview, we use the offset top value of the items.

The Preview object will have a reference to the currently displayed item (Preview.$item), and the index of the expanded item (Preview.expandedIdx). Note that the expanded item is not necessarily the displayed item. For instance if we click on a second item that is on the same row as the one clicked before then the Preview will be “reused” and the Preview.expandedIdx will not be the index of the Preview.$item. We need to keep the reference to the expanded item so that when the Preview is closed we know which item to “collapse”.

To reveal the preview we need to set the height of the Preview element and also of the item (to push down the items below). The height of the preview will be the window´s height minus the height of the grid item. To avoid cases where that height could be too small we add the option “minHeight” where we can specify the minimum height needed for the preview element.
As the preview opens we will want to scroll the window so that the preview is completely visible (and if possible, also the item).

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

Hi,
has anyone tried to make friends with MixitUp?
It works, but when the filter is incorrectly defined “offsetTop”.When you click on the element throws the top of the page or in the middle, the element is lost from the viewing area. Maybe somebody can do a reinitialization to properly consider offsetTop?

Hi ! Thx for your help and this very good tuto ! I have one question : is it possible to insert a different link into each description ?
For example : “A” image to “A” website, “B” image to “B” website…..
(sorry for my english…)

I have used MixItUp on top of this to filter my portfolio thumbnail grid successfully, but the expanding thumbnail preview does not follow the filter. In other words, the expanded preview still follows the numerical order and does not skip to the next filtered image. Anyone know how to correct this?

hi i want help, actually this design looks aesome, but in responsive view when you click the images it will expand right then the bootom portion it occupies lot of blank space how to overcome this? please can you provide me remedy?

What a great script. I’ve been looking for something like this for a while. Just wondered how easy would it be to adapt it to load an external file into the space directly under the description segment and lose the visit website button all together, considering my knowledge of programming is minimal.

I’m also wondering if it is possible to have a link on the expanded page load a modal window.

Is there a way to add a unique identifier to the url for each image once the panel opens so that you can directly link to a specific image with its corresponding panel already expanded/open? Similar to how Google Images adds a unique identifier to the end of the url.

Hi guys. This is an awesome tutorial. I know this has been asked multiple times but I couldn’t find anyone posting a solution to this. Is there a way to add more than one image in the og-expander-inner? As it is currently, it only displays the image in data-largesrc, but is there a way to show more than one image? Thanks in advance!

Wow! Congratulations!I liked it a lot, but I’m having a little problem, I would put some information so he clicked on the image.
example: data-description = “Here is a description Here is a phone Here is an address Here’s a site..”

Note: I know there’s no way to put these but would like a way to get something that does the same function as the would do if it were possible.