Demo
^ back to top
Download
- dynPuzzle 1.0
This version is a complete collection of a minified js file (~1.6KB), the source code, a sample image and a demo page.
- the first and last version ;o)
^ back to top
Usage and installation
Usage is as simple as:
<script type="text/javascript" src="puzzle.js"></script> somewhere in your document, adding an id="puzzle" to some element (DIV, P, SPAN,...) and makeing shure that the image 'puzzle.jpg' is in the same directory as the script, et voilá.
You don't even need to take care of the DOM to be loaded first (so no window.onload or
$(function(){...} in jQuery... necessary). There is almost nothing you can do wrong,... and if so (no image, no id, etc.) it doesn't produce any javaScript errors,... it then just doesn't work.
There is no need to set it up, but if you want to,... you may be very creative an flexible to do so.
If you want to make your own image, you have to get 2 to 10 square images you want to diplay in a row from left to right (as you see with the demos). This image has to be in the same directory as the script or, if you add the right parameter to the function, it can even be somewhere else.
If you don't want to use the arguments of the function, it also needs to be called 'puzzle.jpg'
How and which parameters to add:
The function 'puzzle()' ends with ...}()); The arguments are placed right between the first two round brackets, seperated by a coma, like this: ...}(here, and_here,...));
The parameters are all optional and in the following order (set to 'null' if you want to skip one):
- obj: the Element you want to put the puzzle into. This way you can call your element different than 'puzzle' or even find another way of referring to it
(default: document.getElementByID('puzzle');)
- image: image name with full path if you don't use default (jpg, png, gif are allowed)
(default: puzzle.jpg)
- script: if you copy this script into another script (so it's not called puzzle.js) or you rename the script then you have to set this parameter to the name of the script.
(default: puzzle.js)
- grid: amount of slices in one axis. (default is 5, so 5x5 = 25 slices)
- init: the initial image that should be shown in the beginning. (0 is first image) (default: 1)
- imageTime: an array of millisecons for each image how often it should be changed.
(default: [1800,700,1250,666,888,10420,453,2015,2183,777])
- scrumble: an array of true or fals for each image if it should appear shuffled on the screen.
(default: [false,false,...,false])
- scrumbleInit: set to true if the initial image should be shuffled aready in the beginning.
(default: false)
- scrumbleAll: same as above but also shuffled with all other images (total chaos ;o)
(default: false)
The app automatically calculates the amount of images you got and automatically crops the image a little bit if the amount of slices don't exactly fit to the dimensions of the image (255 pixels / 7 slices = 36.43 pixels, so the image ends up to be 7 x 36 = 252 pixels in dimension).
The surrounding DIV gets the class name 'puzzle', just in case you need it for your CSS. But be carefull with borders and stuff if you want to make it run in IE5.5...
Get rid of the '(' in the beginning of the function and the '())' at the end if you want to use puzzle() more then once on your page (This causes the 'eating it self up' effect)
You can have a/some e.g. setInterval('puzzleShifter(1)',1100); in your code to add some more slice changes to your effect. the '1' is for the second image (numbering starts with 0) and the '1100' is the time in milliseconds for the next shuffling of this image.
^ back to top
Background
This app is the result of a fun class I had last December. The students were very motivated and after hours of analyzing and speed optimizing web pages, cutting down HTML, CSS and even javaScripts of different pages to the most efficient,... my students were so excited about what's possible,... that we decided to do a remake of an existing, totally overloaded thing we found on the web.
It was quite exactly the same puzzle effect app, based on jQuery with an additional library (7.15KB) and a 'setup-file' of another 14.6KB (besides the 75 HTML requests of 3 5x5 sliced images).
We wanted to be able to do exactly the same thing as the original app and decided to keep it below 100 lines of code. As soon as we discovered the techniques, we wanted to cut it down to a 50 liner... we ended up with 40 lines, so we added some nice features and got back to 49 lines ;o).
The topic of that afternoon was 'how to use sprites' that we used earlier on a page's navigation... so the basic idea was to not use so many single images but only 1 and slice it by changing the background image position of DIV-Elements. The shifting is a simple classRenaming of those DIVs...
It's possible to make this app even shorter, but you'll end up with setting up very difficult style structures for the DIVs and ballast for the DOM. This way you just have some simple DIVs with only a className and at the end there is only a function left that includes 4 (actually 2) simple lines of code...
It would be nice to have some transition effect to it,... go ahed and add them ;o)
^ back to top
