How to make a 3D gallery using javascript

3D gallery – using javascript

Today we continue JavaScript lessons, and our article will about creating modern 3d photo gallery using pure javascript. We will simulate 3D effect using z-indexes. Via mouse clicking we will moving from one photo to another. And I sure that better to see demo now.

Here are sample and downloadable package:

Live Demo

download in package

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 3d gallery.

index.html

<link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
<script src="js/main.js" type="text/javascript"></script>

<div class="example" id="gall">
    <img src="images/pic1.jpg"><span>Picture 1 title<br>and description.</span>
    <img src="images/pic2.jpg"><span>Picture 2 description.</span>
    <img src="images/pic3.jpg"><span>Picture 3 description.</span>
    <img src="images/pic4.jpg"><span>Picture 4 description.</span>
    <img src="images/pic5.jpg"><span>Picture 5 description.</span>
    <img src="images/pic6.jpg"><span>Picture 6 description.</span>
    <img src="images/pic7.jpg"><span>Picture 7 description.</span>
    <img src="images/pic8.jpg"><span>Picture 8 description.</span>
    <img src="images/pic9.jpg"><span>Picture 9 description.</span>
    <img src="images/pic10.jpg"><span>Picture 10 description.</span>
    <img src="images/pic11.jpg"><span>Picture 11 description.</span>
    <img src="images/pic12.jpg"><span>Picture 12 description.</span>
    <img src="images/pic13.jpg"><span>Picture 13 description.</span>
    <img src="images/pic14.jpg"><span>Picture 14 description.</span>
    <img src="images/pic15.jpg"><span>Picture 15 description.</span>
</div>

As we can see – I put all used images for gallery in ‘images’ folder. All pretty easy here.

Step 2. CSS

Here are used CSS styles:

css/main.css

body{background:#333;margin:0;padding:0}

.example {
    position:absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 95%;
    background: #333;
    overflow: hidden;
}
.example img {
    position: absolute;
    background: #666;
    overflow: hidden;
    cursor: pointer;
    left: 100%;
    border-color: #333;
    border-style: solid;
    border-width: 1px;
}
.example span {
    position: absolute;
    color: #efe;
    font-family: verdana;
    font-size: 0px;
    white-space: nowrap;
    left: -999px;
    background: #333;
    /*filter: alpha(opacity=70);
    opacity: 0.7;*/
    background: rgba(0, 0, 0, 0.7);
}

Step 3. JS

Here are our main control JS file.

js/main.js

to_px = function (x) { return ''.concat(Math.round(x), 'px'); }
g_resize = function() { pgal.resize(); }

var pgal = {
    O : [], N : 0, S : 0, img : 0, span : 0, xm : 0, ym : 0, nx : 0, ny : 0, nw : 0, nh : 0,
    cx : 0, cy : 0, zoom : 1, x : 0, y : 0, z : -30000, xt : 0, yt : 0, zt : 0, 

    init : function () {
        this.cx   = this.nw / 2;
        this.cy   = this.nh / 2;
        this.img  = document.getElementById('gall').getElementsByTagName('img');
        this.span  = document.getElementById('gall').getElementsByTagName('span');
        this.N    = this.img.length;
        for (var i = 0; i < this.N; i++) this.O[i] = new this.PGObj(i);
        this.run();
        this.O[0].click();
    },
    resize : function () {
        var o   = document.getElementById('gall');
        this.nx   = o.offsetLeft;
        this.ny   = o.offsetTop;
        this.nw   = o.offsetWidth;
        this.nh   = o.offsetHeight;
        this.zoom = this.nh / 900;
    },
    run : function () {
        pgal.cx += (pgal.xm - pgal.cx) * .1;
        pgal.cy += (pgal.ym - pgal.cy) * .1;
        pgal.x  += (pgal.xt - pgal.x)  * .05;
        pgal.y  += (pgal.yt - pgal.y)  * .05;
        pgal.z  += (pgal.zt - pgal.z)  * .1;
        var i = pgal.N;
        while (i--) pgal.O[i].anim();
        setTimeout(pgal.run, 16);
    },
    PGObj : function (n) {
        this.n                = n;
        this.x                = pgal.zoom * Math.random() * pgal.nw * 3 - pgal.nw;
        this.y                = pgal.zoom * Math.random() * pgal.nh * 3 - pgal.nh;
        this.z                = Math.round(n * (10000 / pgal.N));
        this.w                = pgal.img[n].width;
        this.h                = pgal.img[n].height;
        this.oxt              = pgal.span[n];
        this.oxs              = this.oxt.style;
        this.txt              = pgal.span[n].innerHTML;
        this.oxt.innerHTML    = "";
        this.obj              = pgal.img[n];
        this.obs              = this.obj.style;
        this.obj.parent       = this;
        this.obj.onclick      = function() { this.parent.click(); }
        this.obj.ondrag       = function() { return false; }
        this.oxt.style.zIndex = this.obj.style.zIndex = Math.round(1000000 - this.z);
        this.F                = false;
        this.CF               = 100;
        this.sto              = []; 

        this.anim = function() {
            var f = 700 + this.z - pgal.z;
            if (f > 0) {
                var d               = 1000 / f;
                var X               = pgal.nw * .5 + ((this.x - pgal.x - pgal.cx) * d);
                var Y               = pgal.nh * .5 + ((this.y - pgal.y - pgal.cy) * d);
                var W               = d * this.w * pgal.zoom;
                var H               = d * this.h * pgal.zoom;
                this.obs.left       = to_px(X - W * .5);
                this.obs.top        = to_px(Y - H * .5);
                this.obs.width      = to_px(W);
                this.obs.height     = to_px(H);
                this.oxs.visibility = (this.CF-- > 0 && Math.random() > .9) ? "hidden" : "visible";
                this.oxs.left       = to_px(X - W * .5);
                this.oxs.top        = to_px(Y + H * .5);
                if ((pgal.zt - pgal.z) < 20) {
                    if (! this.F) {
                        this.F            = true;
                        this.CF           = Math.random() * 200;
                        this.oxs.fontSize = to_px(1 + d * 20 * pgal.zoom);
                        var T             = "";
                        var tn            = this.txt.length;
                        for(var i = 0; i < tn; i++) {
                            T = T.concat(this.txt.charAt(i));
                            this.sto[i] = setTimeout('pgal.O['.concat(n, '].oxt.innerHTML = "', T, '";'), Math.round(f / 4) + 10 * i);
                        }
                    }
                } else {
                    this.F = false;
                    this.oxt.innerHTML = "";
                }
            } else {
                this.x  = pgal.zoom * Math.random() * pgal.nw * 3 - pgal.nw;
                this.y  = pgal.zoom * Math.random() * pgal.nh * 3 - pgal.nh;
                this.z += 10000;
                this.oxs.zIndex = this.obs.zIndex = Math.round(1000000 - this.z);
            }
        } 

        this.cto = function() {
            var i = this.txt.length;
            while (i--) clearTimeout(this.sto[i]);
        } 

        this.click = function() {
            var i = pgal.N;
            while (i--) pgal.O[i].cto();
            if (pgal.S != this) {
                pgal.xt = this.x;
                pgal.yt = this.y;
                pgal.zt = this.z;
                pgal.S  = this;
            } else {
                pgal.S   = 0;
                pgal.zt += 1600;
            }
        }
    }
} 

// event handlers
window.onresize = g_resize;

document.onmousemove = function(e) {
    if (window.event) e=window.event;
    pgal.xm = (e.x || e.clientX) - pgal.nx - pgal.nw * .5;
    pgal.ym = (e.y || e.clientY) - pgal.ny - pgal.nh * .5;
} 

window.onload = function() {
    g_resize();
    pgal.init();
}

This is most interesting and important part of our gallery. Our photo gallery object (pgal) contain next functions: init, resize and run. During resize we re-saving all current positions of gallery object. In initialization we perform initialization of all main params and objects (images and span text objects). Each photo object (PGObj) have own set of variables, and few main functions – for animation and onclick handling.

Live Demo

download in package

Conclusion

Today we prepared interesting 3d gallery, sure that was interesting to you. If is you were wondering – do not forget to thank us. I would be grateful for your interesting comments. Good luck!

Related Articles

Animated Photo Gallery (grid) with javascript

Creating a Photo Scrambler grid in javascript

Nice CSS3 Lightbox Gallery With jQuery

TiltViewer tutorial – creating 3D flash gallery