Photo grid with javascript. Today we continue JavaScript examples, and today we will create effect of splitting image to pieces (transforming image into grid), plus – our pieces will moving when we will move our mouse pointer. This will pretty interesting demonstration. As we using pure javascript, our result will quite crossbrowser. I already checked it in most major browsers.
Here are sample and downloadable package:
Live Demo
[sociallocker]
download in package
[/sociallocker]
Ok, download the example files and lets start coding !
Step 1. HTML
As usual, we start with the HTML.
This is our main page code of our sample.
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Photo grid (random pieces) example | Script Tutorials (2011)</title> <link rel="stylesheet" href="css/main.css" type="text/css" /> <script src="js/script.js"></script> </head> <body> <h3><a href="#">Photo grid (random pieces) example</a></h3> <div class="example" id="example"> <div id="grid"></div> <img id="src_img" src="data_images/01.jpg" style="visibility:hidden"> </div> <hr style="clear:both;" /> <h4><a href="https://www.script-tutorials.com/photo-grid-in-javascript/">back to original article page</a></h4> </body> </html>
Step 2. CSS
Here are used CSS styles.
css/main.css
body{background:#eee;margin:0;padding:0} h3 {text-align:center} .example{background:#FFF;width:900px;height:600px;border:1px #000 solid;margin:20px auto;padding:15px;position:relative;-moz-border-radius:3px;-webkit-border-radius:3px;overflow: hidden} #grid {position:relative;width:100%;height:100%} #grid .span {overflow:hidden;font-size:1px;position:absolute;left:-9999px}
Step 3. JS
Here are our main control JS file. Most inportant functionality here.
js/script.js
function CObj(y,x){ this.obj = document.createElement('span'); this.obj.className='span'; this.img = document.createElement('img'); this.img.style.position='absolute'; this.img.src = rgrid.doot.src; this.obj.appendChild(this.img); rgrid.mobj.appendChild(this.obj); this.x = x; this.y = y; this.L = 0; this.T = 0; this.xr = (this.x / 2) % 1 ? 1 : -1; this.yr = (this.y / 2) % 1 ? 1 : -1; this.xf = Math.random() * 4 + 1; this.yf = Math.random() * 4 + 1; //initialization function this.init = function (){ this.L = Math.round(this.x * rgrid.Nx); this.T = Math.round(this.y * rgrid.Ny); this.obj.style.width = Math.round(rgrid.Nx + 1) + 'px'; this.obj.style.height = Math.round(rgrid.Ny + 1) + 'px'; this.img.style.left = Math.round(-this.L) + 'px'; this.img.style.top = Math.round(-this.T) + 'px'; } // update object positions this.draw = function (){ this.obj.style.left = Math.round(this.L + (-rgrid.nx / 4 + rgrid.xm) * (this.xr * this.xf)) + 'px'; this.obj.style.top = Math.round(this.T + (-rgrid.ny / 4 + rgrid.ym) * (this.yr * this.yf)) + 'px'; } } var rgrid = { // external variables NX : 5, // amount X elements NY : 5, // amount Y elements // internal variables mobj : null, doot : null, objects : new Array(), nx : 0, ny : 0, nxp : 0, nyp : 0, Ix : 0, Iy : 0, Ox : 0, Oy : 0, xm : 0, ym : 0, // main initialization function init : function(){ this.mobj = document.getElementById('grid'); this.doot = document.getElementById('src_img'); var k = 0; for(var i=0; i<this.NY; i++) for(var j=0;j<this.NX;j++) this.objects[k++] = new CObj(i,j); this.nxp = this.mobj.parentNode.offsetLeft / 2; this.nyp = this.mobj.parentNode.offsetTop / 2; }, // resize function resize : function(){ this.nx = this.mobj.offsetWidth; this.ny = this.mobj.offsetHeight; this.nxp = this.mobj.parentNode.offsetLeft / 2; this.nyp = this.mobj.parentNode.offsetTop / 2; this.Ix = this.doot.width; this.Iy = this.doot.height; this.Nx = Math.round(this.Ix / this.NX); this.Ny = Math.round(this.Iy / this.NY); this.Ox = (this.nx - this.Ix) / 2; this.Oy = (this.ny - this.Iy) / 2; var css = this.mobj.style; css.left = Math.round(this.Ox) + 'px'; css.top = Math.round(this.Oy) + 'px'; css.width = Math.round(this.Ix) + 'px'; css.height = Math.round(this.Iy) + 'px'; var i = 0, o; while (o = this.objects[i++]) o.init(); }, // main loop drawing function run : function(){ var i = 0, o; while (o = rgrid.objects[i++]) o.draw(); setTimeout(rgrid.run, 20); } } // page onload window.onload = function() { rgrid.init(); // perform initialization rgrid.resize(); // perform resizing rgrid.xm = rgrid.nx / 4 - Math.random() * 50; rgrid.ym = rgrid.ny / 4 - Math.random() * 50; rgrid.run(); // binding onresize event window.onresize = rgrid.resize(); } // binding onmousemove event document.onmousemove = function(e){ if (window.event) e = window.event; rgrid.xm = ((e.x || e.clientX) / 2) - rgrid.nxp; rgrid.ym = ((e.y || e.clientY) / 2) - rgrid.nyp; if (Math.abs(2 * rgrid.xm - rgrid.nx / 2) < 2 && Math.abs(2 * rgrid.ym - rgrid.ny / 2) < 2){ rgrid.xm = rgrid.nx / 4; rgrid.ym = rgrid.ny / 4; } }
Step 4. Images
Our sample image located in ‘data_images’ folder.
Live Demo
Conclusion
Hope that you was happy to investigate and play with our javascript lessons. I hope that today`s example looks fine :) If is you were wondering – do not forget to thank. Will glad to listen your interesting comments. Good luck!