Embed Animated GIFs Like Facebook with jqGifPreview

By Jake Rocheleau. in UI/UX. Updated on November 26, 2017.

Twitter and Facebook have a lot of people sharing animated GIFs daily. If these are all auto-played they could be gruesome in a feed.

Both networks get around this with a click-to-preview feature for all GIFs. This lets the user choose which animations they want to see by choosing when to start/stop the animation.

With the jqGifPreview plugin, you can bring this same functionality to your website.

This free jQuery plugin works on all GIFs on the page, or can specifically target any that you want. It’s a fantastic resource but does take a little while to set up.

A paused GIF is really just one frame of the animation, displayed on the page.

Unfortunately, this plugin does not automatically pull a static pic from the GIF for you. But, you can accomplish this using PHP or any other backend language, so with a bit of code, this can be automated.

This plugin uses a data-* attribute to store the GIF image location. Once the user clicks the image, it’ll automatically load into the src attribute of the image and be displayed on the screen.

Simple, effective, and definitely a neat effect! All you need is the CSS/JS files for this plugin that you can pull directly from GitHub. And of course, you’ll need a copy of jQuery, too.

From there, you set up your image like this:

<img class="myImg" src="sample_first_frame.png"
data-gif="sample_giphy.gif">

The main src attribute should contain the static picture. You can either build a script to generate it, or you can manually edit & upload a static shot for each GIF.

The data-gif attribute holds the real animated GIF and they’ll swap on click if you target the main image class (in this case, it’s .myImg). Now, all you need is one line of jQuery to get it all working:

$(".myImg").jqGifPreview();

Definitely, one of the coolest jQuery plugins I’ve seen this month and it’s pretty easy to set up.

You can learn more by visiting the GitHub page and there’s also a live demo preview hosted on the developer’s website.