jQuery Plugin To Create An Animated Jigsaw Image - Image Jigsaw

File Size: 260 KB
Views Total: 6767
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin To Create An Animated Jigsaw Image - Image Jigsaw

Image Jigsaw is a fancy JQuery plugin that converts an image into an animated jigsaw puzzle.

How to use it:

1. Include the jQuery javascript library and jQuery image jigsaw plugin at the bottom of your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="js/img.js"></script> 

2. Insert an image on your web page.

<div class="panel"> 
<img src="img.jpg" width="1000" height="562"> 

3. The sample CSS to style and animate the image based jigsaw puzzle with an transition effect.

.panel_ {
display: inline-block;
padding: 0px;
.jigsaw_panel_ div {
display: inline-block;
margin: 3px;
padding: 0px;
background-repeat: no-repeat;
transition: background-position .5s ease-out;
.panel_ div.clearfix {
margin: 0px;
height: 1px;
width: 100%;
display: block;
padding: 0px;

4. Call the plugin on the image and set the interval for the transition animation.

$(".panel").jigsaw({freq: 1000});

5. Available settings.

width: 0,
height: 0,
x : 4,
y : 4,
margin : 1,
error : 16,
freq :2000,
distinct: true,
image: "",
callbacks: null

Change log:


  • Fixed for jQuery 1.11.3+


  • added option to add event listener


  • plugin code updated - now most of things moved to private class while only the jquery method is exposed


  • code beautified, and concept improved

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