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"> 
</div>

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.

<script>
$(".panel").jigsaw({freq: 1000});
</script>

5. Available settings.

$(".panel").jigsaw({
width: 0,
height: 0,
x : 4,
y : 4,
margin : 1,
error : 16,
freq :2000,
distinct: true,
image: "",
callbacks: null
});

Change log:

2016-04-05

• Fixed for jQuery 1.11.3+

2016-01-06

• added option to add event listener

2015-10-27

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

2015-06-21

• 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.