Slide Puzzle Plugin for Wordpress

Hi guys!!

This is my first plugin for Wordpress: slide-puzzle It's really simple to use, only install it, and enable, I have developed to learn about wordpress plugins architecture.

It uses one shortcode generate slide puzzle from any image that you want, as follows:

 [slide-puzzle pieces=X  myimage='{url}message='{message}']

Where X are the number of pieces ( be careful :-) ), {url} is the image url that can be absolute or relative of  your site, and you can specify one {message} when users completes the slide puzzle.

 For example:

 [slide-puzzle pieces=4  myimage='http://puzle.colome.org/img001.jpg' message='It was easy! congratulations']

 [slide-puzzle pieces=10  myimage='http://puzle.colome.org/img001.jpg' message='You are an ace!']

It not uses Flash!!  it works on an IPAD or an IPHONE too!!!


 New in version 1.1.0 

[slide-puzzle pieces=X  myimage='{image_url}' message='{message}' backcolor='{color}' endimage='{final_image_url}']

Added two new variables 

  • color: in format '#rrggbb' of the background puzzle
  • endimage : url of another image, if you want to show another image when completes the puzzle

sample:

[slide-puzzle pieces=4  myimage='http://wp.colome.org/wp-content/uploads/2013/06/IMAGE0027-e1370813449218.jpg' message='It was easy! congratulations' backcolor='#ff0000' endimage='http://wp.colome.org/wp-content/uploads/2013/07/1.jpg']
 
You can use without new variables and message too:
 
[slide-puzzle pieces=4  myimage='http://wp.colome.org/wp-content/uploads/2013/06/IMAGE0027-e1370813449218.jpg' message='' ]

see this Video about new features


Is based on a canvas element ( only for modern browsers: check), you can customize the default options on plugins management of wordpress

 

If you want to see a demo page for test the plugin, go to: puzle.colome.org

there is a video explain install procedure and use Video

Try it! if you like, post a comment!

link to download  http://www.colome.org/slide-puzzle.zip

 

Comments   

 
+1 #1 Ernesto 2013-07-04 19:11
nice! I'm using it for my site. but I do not divide a square image into 8 pieces. If I insert 8 divided by 9 and if I put seven divided by 6. you can be able to divide a square image for 8 with 7 puzzle pieces? I'll wait
Quote
 
 
0 #2 Authors 2013-07-04 21:04
yes, its true, this is becose I use a square function

(var n = Math.round(Math .sqrt(mn*h / w));

see the code:

http://puzle.colome.org/puzzle.js
Quote
 
 
0 #3 generiq 2013-07-11 06:38
We are working on a new website with wordpress, and we would really like to use your puzzle to stimulate our visitors a bit by forcing them to solve a (simple 3 piece) puzzle of our logo before entering the site. Ideally we would like to have the puzzle load in a lightbox on the home page, then have the lightbox close when the puzzle has been completed. It would also be nice to have a 'skip' option, and also allow the users to simply click outside the lightbox to skip the puzzle if they don't feel like completing it. We've tried using your plugin along with a couple different lightbox plugins, but we can't seem to get it to work exactly how we want. We're getting scripting errors, having trouble getting it to load automatically when the page loads (without the user clicking a link to open the lightbox), and we have no idea how to get the lightbox to close when the puzzle is complete. Any advice or suggestions you could offer would be greatly appreciated!
Quote
 
 
0 #4 Authors 2013-07-11 21:32
generiq, I understand you,If you know some of php and javacript, you can modify the source code to do easy all that you want.
check the source code of http://puzle.colome.org/ its easy to modify, you can replace the alert message with a redirection.
Quote
 
 
0 #5 generiq 2013-07-11 21:40
Quoting Authors:
generiq, I understand you,If you know some of php and javacript, you can modify the source code to do easy all that you want.
check the source code of http://puzle.colome.org/ its easy to modify, you can replace the alert message with a redirection.


Thanks for your reply! Unfortunately, I don't know enough about PHP or Javascript to make the changes. Can you offer any advice or suggestions?
Quote
 
 
0 #6 generiq 2013-07-11 21:42
Quoting Authors:
generiq, I understand you,If you know some of php and javacript, you can modify the source code to do easy all that you want.
check the source code of http://puzle.colome.org/ its easy to modify, you can replace the alert message with a redirection.


Unfortunately, I don't know enough about PHP or Javascript. Can you offer any advice or suggestions? Thanks!
Quote
 

Add comment


Security code
Refresh

We use cookies to improve our website and your experience when using it. Cookies used for the essential operation of the site have already been set. To find out more about the cookies we use and how to delete them, see our privacy policy.

I accept cookies from this site.