Animated GIF Player Plugin With jQuery - freezeframe.js

freezeframe.js is a fancy touch-enabled jQuery GIF player which allows to manually play an animated GIF frame by frame with custom trigger events/elements. Supports responsive images and mobile touch events. Heavily based on Html5 Canvas technique.

Basic Usage:

1. First you need to load the latest version of jQuery JavaScript library in the html document.

<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>

2. Then load the jQuery freezeframe.js plugin's JavaScript and CSS in the document. Note that the freezeframe.min.js must be loaded after jQuery library.

<link rel="stylesheet" href="freezeframe_styles.min.css">
<script src="freezeframe.min.js"></script>

3. Just call the function on the GIF's parent container and done. By default, the plugin will pause the GIF and play it on mouse hover.

$('.selector').freezeframe();

4. Default plugin options.

$('.selector').freezeframe({
  // The selector freezeframe will use to search for .gifs when the capture() function is run (if no custom selector is passed to the capture() function).
  selector : '.freezeframe',
  // The number of milliseconds a .gif will animate for when triggered by click / touch event.
  animation_play_duration: 5000,
  // 'hover' or 'click'
  non_touch_device_trigger_event: 'hover'
  
});

2018-05-22

• v3.0.9: fixed overlay class toggle issue

2016-05-04

• v3.0.8

This awesome jQuery plugin is developed by ctrl-freaks. For more Advanced Usages, please check the demo page or visit the official website.