Embeddable Animated GIFs with controls. Just in time for Christmas.

 

<script src="http://gif.ly/embed/62a6fee8?autoplay=true"></script>

Images from gif.ly are now capable of being embedded as playable GIFs with just a script tag. The embedded GIF has play/pause controls and starts with a static preview of the first frame.

I started collecting animated gifs a few years ago. As a fun side-project, I made gif.ly, a site dedicated to maintaining and presenting my animated gif collection (and it's 100% open source, btw) . It might not be as fun as skateboarding, but it's still not a bad was to pass some time in front of the computer.

The first version if gif.ly I made all the way back in 2010 is also worth checking out if you're building your own arsenal of gif madness.

<script src="http://gif.ly/embed/669583e2?controls=true"></script>

Giving GIFs Some Playback Control

My favorite feature that made it into the latest version of gif.ly is the play/pause controls on individual GIFs. This feature let me avoid needing to create individual pages for every GIF, but also prevented the inevitable performance hit of having too many large, resource intensive images on a single page.

The GIF controls use a simple src swapping trick, but there are a couple of things that need to be in place to get it to work smoothly:

  1. When an image is first uploaded, create a placeholder based off of the first frame. I used image-magick on the server to accomplish this.
  2. Load the placeholder image first in it's own <img> tag, since it will always be smaller than the original.
  3. Use desandro's imagesLoaded jQuery plugin to determine when the cover image is loaded. This excellent plugin normalizes load events for images across all browsers and even works with cached images.
  4. When the cover is done loading, immediately start downloading the original animated gif in the background. This image doesn't end up going anywhere; the DOM node that's created to load it will never be attached, but modern browsers will treat the image like it's been loaded on the page (by caching it).
  5. When "play" is clicked, swap the cover image url for the animated url in the image tag's src attribute. Since the cover image and the original gif are the same size and the original has been loaded and cached by the browser, the playback should start immediately (or as soon as the animated gif is finished loading).

Once playback was in place, it was only a matter of time before I wanted to make gif-controls a portable interface.

<script src="http://gif.ly/embed/7e10f0ad"></script>

How the Embeds Work

The embeds are pretty simple: just a script tag that points to a hash of the GIF you'd like load which inserts the placeholder image, the controls and some JavaScript and CSS to make it all work.

I chose a script based solution over an iframe because iframes don't allow for their content control the size of the frame, which means that if you don't know the size of the GIF you're trying to load beforehand it's likely to get cut off or otherwise not be presented well without additional css.

Here's a breakdown of how the script delivery works:

  1. Create a script tag that points to a gif.ly embed url. It follows the pattern http://gif.ly/embed/<gifi-id>, where gif-id is the 8 character short code in a GIF's url.
  2. First, the script checks if other GIFs embeds are already loaded on the page. If there are, it means this instance of the embed code doesn't have to load any of the additional scripts it needs to run, since they should already be on the page.
  3. If it's the only (or first) embedded GIF on the page, it loads an additional JavaScript payload that contains jQuery, the imagesLoaded plugin and other generic code that it uses to make the controls work. jQuery is loaded in no-conflict mode since we won't know what other versions or libraries are present on the target page.
  4. CSS is loaded to style the controls and DOM that contains the GIF.
  5. A small HTML template is inserted into the DOM immediately after the <script> tag
  6. A callback is attached to the load event of the GIF that was just inserted and the play and pause buttons are wired up to do the src swap trick explained above.

When all of that comes together, you have a GIF with play and pause controls in place of the script tag.

So that this:

<script src="http://gif.ly/embed/a8470725"></script>

Turns into this:

Autoplay and Other Options

Being rather industrious, I added an option for automatic playback (like the very first embed code on this page), just in case you wanted the embedded GIF to behave more like a "normal" animated GIF. Just pass autoplay=true as a querystring parameter on the embed code url to enable.

The control panel behavior can also be modified. Passing controls=true will make the play/pause controls visible at all times, not just on :hover.

Here are some cats playing ping-pong to demonstrate the available options:

<script src="http://gif.ly/embed/3cc8cb64?controls=true&autoplay=true"></script>

Use them anywhere

Keeping this all to myself wouldn't have been any fun, so for now at least, there are no restrictions on where you can or can't use gif.ly embeddable GIFs. Use them anywhere that lets put a script tag (which probably means that it's your site and not somebody else's), so be safe an have fun.

If you're looking at a GIF with gif.ly in the URL, just take it's 8 character ID, put it in a script tag and pause and play til your heart's content.

And most importantly, remember that sharing is caring.

<script src="http://gif.ly/embed/e5c9f456"></script>

Give this post a bump by sharing it with a friend.


QuickLeft closeicon

Let's Build Your Project

Phone: 303.242.5536
Quick Left HQ
902 Pearl St.
Boulder, CO 80302
Quick Left San Francisco
665 3rd St.
#150
San Francisco, CA 94107
Quick Left Portland
529 SW 3rd Ave.
2nd Floor
Portland, OR 97204
Quick Left Denver
Galvanize
1062 Delaware St.
Denver, CO 80204