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')
  

Demo: http://www.nuff-respec.com/technology/slide-puzzle-javascript-mootools
Download: http://www.nuff-respec.com/file_download/11/puzzle.zip
Source: http://www.nuff-respec.com/technology/slide-puzzle-javascript-mootools

Related Listings:

1. MOOSLIDE – AJAX Content Slide Additional functions added for mootols 1.2 version: autoCloseDelay – define...
2. AJAX Feed API Slide Show Control This afternoon we extended the AJAX Feed API with a...
3. ImageCaption – a MooTools Plugin for Auto-Captioning Images ImageCaption is a MooTools 1.2+ plugin for easily adding figure...
4. Get Slick Effects with MooTools Kwicks When it came time for my employer to redo their...
5. MooTools EXT Adapter Script Here is my attempt at creating a mootools adapter for...

Do you like this post?

Email: