https://github.com/mebjas/image-jigsaw

jquery plugin to easy convert any image to image based jigsaw puzzle
https://github.com/mebjas/image-jigsaw

javascript jquery plugin

Last synced: 2 months ago
JSON representation

jquery plugin to easy convert any image to image based jigsaw puzzle

• Host: GitHub
• URL: https://github.com/mebjas/image-jigsaw
• Owner: mebjas
• License: mit
• Created: 2014-01-07T07:53:02.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2018-03-07T20:39:26.000Z (almost 7 years ago)
• Last Synced: 2024-05-23T09:00:29.548Z (7 months ago)
• Topics: javascript, jquery, plugin
• Language: JavaScript
• Homepage:
• Size: 370 KB
• Stars: 24
• Watchers: 6
• Forks: 8
• Open Issues: 2
• Metadata Files:
  • Readme: readme.md
  • License: license.md

Awesome Lists containing this project

README

        
Image jigsaw js library

================================================

easily create a jigsaw from any image - [view demo](https://minhazav.xyz/samples/jquery-image-jigsaw/)

**screenshot**

![alt tag](https://preview.ibb.co/b6vm7n/Capture.png)

**How to use**

**To create a jigsaw**

create a **div class="panel"** and place the required image inside it like


<div class="panel">

	<img src="img.jpg">

</div>



**you need to mention the height and width for the code to perform its task**


you need to include the scripts in **./js/** directory like


<script src="js/jquery.js"></script>

<script src="js/img.js"></script>

<script>

	$(".panel").jigsaw({freq: 2000, x: 4, y: 4, margin: 2});

</script>



##Explanation for property fields

```

freq: time in milli seconds when the images should change

x: no of columns

y: no of rows

margin: margin between each blocks

distinct: (new) set to false if you dont require each block to be distinct images

```