How to Expand Thumbnails Like Google Images

By . in UI/UX. Updated on .

Google Images runs a unique UI with thumbnail previews from many different websites. Clicking any of these thumbnails expands the screen with more details and a larger pic.

It’s one of the best image gallery features I’ve used and now, you can clone it with Gridder.js.

This free jQuery plugin follows in the footsteps of Google’s incredible UX by creating a plugin that matches this effect. You can turn any photo gallery into a Google Images-style gallery with all the same animations and display features.

I’m pleasantly surprised by the speed and ease of use that comes with this plugin. Just clicking any thumbnail immediately displays a larger shot and the animations are super clean.

Gridder.js image search plugin

The images include a section for descriptive text in case you want to add some details or links related to the pics. This works especially well for simple portfolio sites with a goal of focusing on the images.

On top of that, you can also pull content via Ajax. This lets you create dynamic thumbnails that pull content from other websites or through APIs.

Each click event offers a callback method, so you can even run other plugins or JavaScript functions alongside Gridder. With so many options, it practically feels like an entire grid framework!

Since Gridder runs on jQuery, it does require the newest version as a dependency. But, that’s all you need (along with the Gridder.js file), and with a few lines of HTML, you can have your grid running smoothly.

You should check out the GitHub page for full setup instructions but here’s a quick preview of what the HTML looks like:

  <!-- Gridder navigation -->
  <ul class="gridder">
      <li class="gridder-list" data-griddercontent="#content1">
          <img src="http://placehold.it/600x400" />
      </li>

      <!-- You can also load html/ajax pages by replacing the #ID with a URL -->
      <li class="gridder-list" data-griddercontent="/content.html">
          <img src="http://placehold.it/600x400" />
      </li>
  </ul>

  <!-- Gridder content -->
  <div id="content1" class="gridder-content"> Content goes here... </div>

All content gets pulled through JavaScript, so you can load pretty much anything you want.

It’s an incredibly versatile plugin with options to change the animation speed, easing, close button style, and scroll offset position for when the user clicks a new thumbnail.

Newbie and pro developers alike will find a lot of value in this plugin. Yet, if you still aren’t sure if this is for you take a look at the live Gridder demo page and play around.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail