SwPixelBoard
download
INTRODUCTION
SwPixelboard is based on the use of an image retrieved from a JSON call and stored into an object. This object is then used to create DIVs where each div as the color of the corresponding pixel inside the picture. Find here 3 demonstrations with the 3 different modes that I created.
SwPixelboard is doing asynchronous calls to load the images. So you would need the PHP files in order to retrieve the image in a JSON format. The call in javascript is made to:getimageobject.php, but the 3 PHP files are required. Note that you can easily compile this into a single PHP file if you want to.
The client side is basic, I have put the CSS is inline, it is only 2 declarations.
Building bigger images could be very resource hungry, since the basic principle is to create as many divs as there are pixels
I use this on http://standupweb.net
FEEDBACK: Comment on post or sign up and go to the forum section: click here
EXAMPLE
-
swPixelBoard in mode 3 (default mode = leaves a trail on mouse over)
-
swPixelBoard in mode 2 (update picture line by line)
-
swPixelBoard in mode 1 (update picture square by square)
STEP BY STEP
1- Include a div in the body of your html:
<div id='pixelboard' class='pboard'></div>
2- CSS: Copy, paste and adapt:
.pboard { position:relative; width: 900px; height: 590px; z-index:0; }
.pboard div { position: absolute; width:25px; height:25px; border:0px; }
3- copy the lib folder containing the php files in the root folder.
4- copy and include the .js files (preferably right before </body>)
<script src="lib/mootools/mootools-1.2.1-core-jm.js" type="text/javascript"></script>
<script src="js/swPixelBoard.js" type="text/javascript"></script>
5- include this after the lines included in step 4
<script language="JavaScript">
window.addEvent('domready', function(){
var pixelBoard = new SwPixelBoard('pixelboard');
});
</script>
6- (optional): options
replace the 3 line of the script in step 5 by:
var pixelBoard = new SwPixelBoard('pixelboard', {<OPTION>:<VALUE>, <OPTION>:<VALUE>...}});
where <OPTION> can be:
mode: [1|2|3]
mode= 1:line by line, pixel by pixel
mode= 2:line by line
mode= 3:trail
speed: Speed at which the pixel are being displayed (mode 1 and 2 only). Default: 500
nbOfPictures: Number of pictures to display in the slideshow (mode 1 and 2 only). Default: 5
