simple Slide Puzzle in JavaScript (mootools)

Home Slideshow & Scrollersimple Slide Puzzle in JavaScript (mootools)

simple Slide Puzzle in JavaScript (mootools)

13 years ago Views

15572

2011

nuff-respec

simple Slide Puzzle in JavaScript (mootools)

So I finally decided to try out one of these JavaScript libraries … and what better way than to create a Slide puzzle. I chose mootools because of there modular download … it’s pretty slick. My goal was to make it simple for users:

- include the source file
– add one DIV with IMG
– no need to slice up image

usage…

//ADD SCRIPT TAGS
<script src="j/mootools.v1.00.js" type="text/javascript">
</script>
<script src="j/puzzle.js" type="text/javascript">
</script> 

//ADD DIV ID PUZZLE WITH IMG
<div id="puzzle">
<img src="abc.jpg" alt="" width="5" height="5" />
</div>

//CALL FUNCTIONS functions
//makes 3x3
Puzzle.make(3);

//shuffles puzzle
Puzzle.shuffle();

//fixes puzzle
Puzzle.fix() ;

//switch image
Puzzle.switch_image('xyz.jpg')

Tag: image slideshow