jQuery Plugin To Play Animated GIF On Hover - gifPlayer

File Size: 1.06 MB
Views Total: 4530
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Play Animated GIF On Hover - gifPlayer

gifPlayer is a jQuery plugin that replaces an animated GIF with a static image and then play it on mouse hover. Useful to save the bandwidth and improve the page load speed. The plugin uses javascript to swap between 

How to use it:

1. Add the animated and static GIFs into an img tag like this:

<img class="playgif" data-swap="animated.gif" src="static.gif">

2. Load the necessary jQuery JavaScript library into your html page.

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

3. The jQuery script to swap between data-swap and src attributes when mouse hovers in/out.

var imageSwap = function () {
    var $this = $(this);
    var newSource = $this.data('swap');
    $this.data('swap', $this.attr('src'));
    $this.attr('src', newSource);
}

$(function () {
  $('img.playgif').hover(imageSwap, imageSwap);
});

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