JQuery


JQuery is another powerful Javascript library. Here once again, we're using a ready made Javascript project built from a framework. This project demonstrates how JQuery can be used to create a sliding puzzle.

Here is what the sliding puzzle looks like.


View Slide Puzzle



Downloads



jquery-latest.pack.js
jquery.puzzle.js
monalisa.jpg


The "puzzle" html file can be viewed and downloaded below.
view plaincopy to clipboardprint?
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title>Sliding Image Puzzles</title>  
  5.         <script type="text/javascript" src="js/jquery-latest.pack.js"></script>  
  6.         <script type="text/javascript" src="js/jquery.puzzle.js"></script>  
  7.         <script type="text/javascript">  
  8.             // The puzzle number corresponds to the size of the puzzle pieces  
  9.             $(  
  10.             function(){  
  11.             $( "div.puzzle, p" ).puzzle( 100 );  
  12.             }  
  13.             );  
  14.         </script>  
  15.     </head>  
  16.     <body>  
  17.         <center>  
  18.         <h2>  
  19.             Sliding Image Puzzles  
  20.         </h2>  
  21.           
  22.         <!-- images must be 300 by 300 pixels square -->  
  23.           
  24.         <!-- START COPYING HERE -->  
  25.           
  26.             <div class="puzzle">  
  27.                 <img src="images/monalisa.jpg" />  
  28.             </div>  
  29.   
  30.         <!-- STOP COPYING HERE -->  
  31.           
  32.         </center>  
  33.   
  34.     </body>  
  35. </html>  

Make sure the javascript files are placed in a folder called js and the images are placed in a folder called images.



Sample Projects


Students will
  1. collect images for a small website about an artist or photographer or other cultural form of visual expression (or use images from previous assignment) and implement a lightbox slideshow
  2. use Photoshop to resize/crop images as needed and create sliding puzzle page