Animated Photo Gallery (grid) with javascript

Animated Photo Gallery (grid) with javascript

2 55305
Animated photo gallery grid

Photo Gallery (grid) with javascript. As I know – very many peoples using different photo galleries at own websites. They like to share its own photos, friend`s photos, vacations etc. This is because we trying to make tutorials about different galleries. Today we will continue creating photo albums. But today we don`t will use any ready plugins, it will be done on pure javascript. This will cross-browser professional gallery made in HTML+JS+CSS.

Here are samples 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 source code of our sample:

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
        <link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
        <script src="js/main.js" type="text/javascript"></script>
</head>
<body>
<div class="example" id="main">
        <div id="panel">
                <div class="unit" title="Description of picture 1"><img src="data_images/pic1.jpg" alt=""></div>
                <div class="unit" title="Description of picture 2"><img src="data_images/pic2.jpg" alt=""></div>
                <div class="unit" title="Description of picture 3"><img src="data_images/pic3.jpg" alt=""></div>
                <div class="unit" title="Description of picture 4"><img src="data_images/pic4.jpg" alt=""></div>
                <div class="unit" title="Description of picture 5"><img src="data_images/pic5.jpg" alt=""></div>
                <div class="unit" title="Description of picture 6"><img src="data_images/pic6.jpg" alt=""></div>
                <div class="unit" title="Description of picture 7"><img src="data_images/pic7.jpg" alt=""></div>
                <div class="unit" title="Description of picture 8"><img src="data_images/pic8.jpg" alt=""></div>
                <div class="unit" title="Description of picture 9"><img src="data_images/pic9.jpg" alt=""></div>
                <div class="unit" title="Description of picture 10"><img src="data_images/pic10.jpg" alt=""></div>
                <div class="unit" title="Description of picture 11"><img src="data_images/pic11.jpg" alt=""></div>
                <div class="unit" title="Description of picture 12"><img src="data_images/pic12.jpg" alt=""></div>
                <div class="unit" title="Description of picture 13"><img src="data_images/pic13.jpg" alt=""></div>
                <div class="unit" title="Description of picture 14"><img src="data_images/pic14.jpg" alt=""></div>
                <div class="unit" title="Description of picture 15"><img src="data_images/pic15.jpg" alt=""></div>
        </div>
</div>
</body>
</html>

As you can see – I just draw list of our objects to our new gallery. Description for objects will put into ‘title’ attribute.

Step 2. CSS

Here are used CSS file for our gallery:

css/main.css

body{background:#444;margin:0;padding:0}
.example{position:relative;width:80%;height:800px;border:1px #000 solid;margin:20px auto;padding:20px;-moz-border-radius:3px;-webkit-border-radius:3px}
#main{overflow:hidden}
#panel{position:absolute;height:840px;width:1400px;background:#000 url(../images/bg.gif);padding:10px}
#main .unit{position:relative;float:left;width:256px;height:256px;background:#777;overflow:hidden;border:1px #777 solid;-moz-border-radius:5px;-webkit-border-radius:5px;margin:10px}
#main .hover{position:absolute;width:100%;height:100%;background:#222 url(../images/hover.gif);z-index:10;opacity:0.95}
#panel img{position:absolute;visibility:hidden;-ms-interpolation-mode:nearest-neighbor;image-rendering:optimizeSpeed}
#panel .info{position:absolute;bottom:0;font-size:16px;color:#FFF;width:250px;font-family:Verdana;font-weight:700}

Step 3. JS

Here are single JS file (this file already in our package):

js/main.js

var xm = 0;
var ym = 0;
sP = {
        cx : 0,
        cy : 0,
        N  : 0,
        R  : [],
        I  : [],
        C  : [],
        L  : [],
        Id : 0,
        // initialization
        init : function () {
                this.scr = document.getElementById('main');
                this.pan = document.getElementById('panel');
                this.div = this.pan.getElementsByTagName('div');
                this.scr.onselectstart = function () { return false; };
                this.scr.ondrag = function () { return false; };
                for (var i = 0, o; o = this.div[i]; i++) {
                        if (o.className == 'unit') {
                                // legend
                                o.l = document.createElement('div');
                                o.l.className = 'info';
                                o.appendChild(o.l);
                                // hover
                                o.r = document.createElement('div');
                                o.r.className = 'hover';
                                o.appendChild(o.r);
                                o.r.x = 0;
                                o.r.l = o.l;
                                o.r.p = 0;
                                o.r.s = 2;
                                o.r.m = false;
                                o.img = o.r.img = o.getElementsByTagName('img')[0];
                                o.r.c = Math.random() * 100;
                                o.r.o = o;
                                sP.R[sP.N] = o.r;
                                sP.I[sP.N] = o.img.src;
                                sP.L[sP.N] = o.title;
                                o.title = '';
                                sP.N++;
                                // mouse over effect
                                o.r.onmouseover = function () {
                                        if (!this.m && this.img.complete) {
                                                // walk through images
                                                if (sP.O != this && !this.n) {
                                                        this.x = this.o.offsetWidth;
                                                        this.l.innerHTML = sP.L[sP.Id];
                                                        this.img.src = sP.I[sP.Id];
                                                        this.resize();
                                                        this.n = true;
                                                        if(++sP.Id >= sP.N) {
                                                                sP.Id = 0;
                                                                for (var i = 0, o; o = sP.R[i]; i++) o.n = false;
                                                        }
                                                }
                                                if (sP.O) {
                                                        sP.O.s = 2;
                                                        sP.C.push(sP.O);
                                                }
                                                this.m = true;
                                                sP.O = this;
                                                sP.Or = this;
                                        }
                                };
                                // resize
                                o.r.resize = function () {
                                        var i = new Image();
                                        i.src = this.img.src;
                                        this.img.style.width  = (i.width  < this.offsetWidth) ? Math.round(this.offsetWidth  * 1.25) + 'px' : Math.round(i.width) + 'px';
                                        this.img.style.height = (i.height < this.offsetHeight) ? Math.round(this.offsetHeight * 1.25) + 'px' : Math.round(i.height) + 'px';
                                        this.w = (this.img.offsetWidth  - this.offsetWidth)  * 0.5;
                                        this.h = (this.img.offsetHeight - this.offsetHeight) * 0.5;
                                        this.img.style.visibility = 'visible';
                                };
                        }
                }
                // start
                sP.resize();
                sP.run();
        },
        resize : function () {
                // resize window
                var o = sP.scr;
                sP.nw = o.offsetWidth;
                sP.nh = o.offsetHeight;
                sP.iw = sP.pan.offsetWidth;
                sP.ih = sP.pan.offsetHeight;
                for (sP.nx = 0, sP.ny = 0; o !== null; o = o.offsetParent) {
                        sP.nx += o.offsetLeft;
                        sP.ny += o.offsetTop;
                }
                for (var i = 0, o; o = sP.R[i]; i++) { o.resize(); }
        },
        // loop
        run : function () {
                // scroll main area
                sP.cx += (((Math.max(-sP.nw, Math.min(0, (sP.nw * 0.5 - (xm - sP.nx) * 2))) * (sP.iw - sP.nw)) / sP.nw) - sP.cx) * 0.1;
                sP.cy += (((Math.max(-sP.nh, Math.min(0, (sP.nh * 0.5 - (ym - sP.ny) * 2))) * (sP.ih - sP.nh)) / sP.nh) - sP.cy) * 0.1;
                sP.pan.style.left = Math.round(sP.cx) + 'px';
                sP.pan.style.top  = Math.round(sP.cy) + 'px';
                // image moving and legend
                if(sP.O) {
                        sP.O.c += 0.02;
                        sP.O.img.style.left = Math.round(-sP.O.w + sP.O.w * Math.sin(sP.O.c * 1.1)) + 'px';
                        sP.O.img.style.top  = Math.round(- sP.O.h + sP.O.h * Math.sin(sP.O.c)) + 'px';
                        sP.O.l.style.left = Math.round(sP.O.x--) + 'px';
                }
                // hover up
                if (sP.Or) {
                        sP.Or.p -= sP.Or.s;
                        sP.Or.s *= 1.8;
                        if (sP.Or.p < -sP.Or.offsetHeight) {
                                sP.Or.p = -sP.Or.offsetHeight;
                                sP.Or.s = 2;
                                sP.Or.m = false;
                                sP.Or = false;
                        }
                        sP.O.style.top = Math.round(sP.O.p) + 'px';
                }
                // hover down
                for (var i = 0, c; c = sP.C[i]; i++) {
                        if (c != sP.Or) {
                                c.p += c.s;
                                c.s *= 1.2;
                                if (c.p >= 0) {
                                        c.p = 0;
                                        c.s = 2;
                                        c.m = false;
                                        sP.C.splice(i, 1);
                                }
                                c.style.top = Math.round(c.p) + 'px';
                        } else {
                                c.s = 2;
                                c.m = false;
                                sP.C.splice(i, 1);
                        }
                }
                setTimeout(sP.run, 16);
        }
};
// on mouse position functionality
document.onmousemove = function(e) {
        if (window.event) { e = window.event; }
        xm = e.clientX;
        ym = e.clientY;
        return false;
};
// start gallery onload
function startGallery() {
        sP.init();
        onresize = sP.resize;
}
if (window.attachEvent) { window.attachEvent('onload', startGallery); }
else {window.addEventListener('load', startGallery, false); }

As I promised – pure JS, without any jQuery, interesting, isn`t it?

Step 4. Images

All our gallery images located in ‘data_images’ folder. Plus in our css file you can see just 2 using images:

    background
    hover

Live Demo

Conclusion

Our gallery is now finished. I assume that demo was very interesting for our readers again. Don`t afraid to experiment with styles, images, and even script functionality. Good luck!

SIMILAR ARTICLES

Understanding Closures

0 24630

2 COMMENTS

Leave a Reply