Scrambler

jQuery Plugin: Image Scrambler

Would you like to create a puzzle out of your images? Scrambler uses Unsplash images to create a 16-square puzzle.

Demo

Navigate to the project hosted on github.com here

Navigate to the Scrambler about page.

Clone the repository.
Navigate to the index.html through your web browser for a basic example.
Navigate to the dist folder.
Adjust the CSS/main.css file to fit your needs.
Navigate to the JS/main.js file.
On line 316, you'll find this tag: $('#game_object').scrambler(130);
Replace #game_object with the ID that corresponds to the tag you'd like Scrambler to show up in.
If you'd like your puzzle squares to be smaller or larger than 130px, replace 130 with the size you'd like.
Include the CSS/main.css and JS/main.js files in your project.

16-square game logic: The tutorial below gave me the initial code to create a grid from an image. I refactored the code and added the following functionality: shuffle, unshuffle, difficulty levels, score, and help.
- How to create a game using jQuery
To create modal popups: Create a Fading Popup Modal with jQuery
Treehouse: jQuery Basics