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.


Navigate to the project hosted on here


Navigate to the Scrambler about page.


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


Technologies Used

jQuery, HTML5 data-* attributes, AJAX

Potential New Features