1. Requirements
2. Usage
3. Customization
4. Resources

You can also modify number of columns and rows to get more or fewer puzzle pieces.

Requirements ¶

It will work good for version more than YII 1.0.


Usage ¶

Step 1 ¶

Download the imagepuzzle.zip and move it in your application/protected/extension/ folder.

Step2 ¶

Add the following line on the page where you want the game

<?php 
$this->widget('application.extensions.imagepuzzle.Puzzle', 
array('columns'=>3, //columns
'rows'=>4, // rows 
'images'=>array('image1.jpg',
'image2.jpg','image3.jpg','image4.jpg',
'image5.jpg','image6.jpg','image7.jpg',
'image8.jpg','image9.jpg') //images shown in the game
)); ?>

Customization ¶

• The images in the game can be changed. First you need to move your images in the imagepuzzle/assets/images/ folder and then need to give that image as a value. For example you have moved sample.jpg to the assets image folder you need to give in the code.

<?php 
$this->widget('application.extensions.imagepuzzle.Puzzle', 
array('columns'=>3, //columns
'rows'=>4, // rows 
'images'=>array('sample.jpg') //Customized image
)); ?>

• The rows and columns decides about how many cells the image need to split. We can also change that in the code.

<?php 
$this->widget('application.extensions.imagepuzzle.Puzzle', 
array('columns'=>5, // Customized columns
'rows'=>3, // Customized rows 
'images'=>array('sample.jpg') //Customized image
)); ?>

Resources ¶

• Used the script from DHTML Goodies.
• Demo of the game.