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
01 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> |
02 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> |
03 | <head> |
04 | <link rel="stylesheet" href="css/main.css" type="text/css" media="all" /> |
05 | <script src="js/main.js" type="text/javascript"></script> |
06 | </head> |
07 | <body> |
08 | <div class="example" id="main"> |
09 | <div id="panel"> |
10 | <div class="unit" title="Description of picture 1"><img src="data_images/pic1.jpg" alt=""></div> |
11 | <div class="unit" title="Description of picture 2"><img src="data_images/pic2.jpg" alt=""></div> |
12 | <div class="unit" title="Description of picture 3"><img src="data_images/pic3.jpg" alt=""></div> |
13 | <div class="unit" title="Description of picture 4"><img src="data_images/pic4.jpg" alt=""></div> |
14 | <div class="unit" title="Description of picture 5"><img src="data_images/pic5.jpg" alt=""></div> |
15 | <div class="unit" title="Description of picture 6"><img src="data_images/pic6.jpg" alt=""></div> |
16 | <div class="unit" title="Description of picture 7"><img src="data_images/pic7.jpg" alt=""></div> |
17 | <div class="unit" title="Description of picture 8"><img src="data_images/pic8.jpg" alt=""></div> |
18 | <div class="unit" title="Description of picture 9"><img src="data_images/pic9.jpg" alt=""></div> |
19 | <div class="unit" title="Description of picture 10"><img src="data_images/pic10.jpg" alt=""></div> |
20 | <div class="unit" title="Description of picture 11"><img src="data_images/pic11.jpg" alt=""></div> |
21 | <div class="unit" title="Description of picture 12"><img src="data_images/pic12.jpg" alt=""></div> |
22 | <div class="unit" title="Description of picture 13"><img src="data_images/pic13.jpg" alt=""></div> |
23 | <div class="unit" title="Description of picture 14"><img src="data_images/pic14.jpg" alt=""></div> |
24 | <div class="unit" title="Description of picture 15"><img src="data_images/pic15.jpg" alt=""></div> |
25 | </div> |
26 | </div> |
27 | </body> |
28 | </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
1 | body{background:#444;margin:0;padding:0} |
2 | .example{position:relative;width:80%;height:800px;border:1px #000 solid;margin:20px auto;padding:20px;-moz-border-radius:3px;-webkit-border-radius:3px} |
3 | #main{overflow:hidden} |
4 | #panel{position:absolute;height:840px;width:1400px;background:#000 url(../images/bg.gif);padding:10px} |
5 | #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} |
6 | #main .hover{position:absolute;width:100%;height:100%;background:#222 url(../images/hover.gif);z-index:10;opacity:0.95} |
7 | #panel img{position:absolute;visibility:hidden;-ms-interpolation-mode:nearest-neighbor;image-rendering:optimizeSpeed} |
8 | #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
001 | var xm = 0; |
002 | var ym = 0; |
003 | sP = { |
004 | cx : 0, |
005 | cy : 0, |
006 | N : 0, |
007 | R : [], |
008 | I : [], |
009 | C : [], |
010 | L : [], |
011 | Id : 0, |
012 | // initialization |
013 | init : function () { |
014 | this.scr = document.getElementById('main'); |
015 | this.pan = document.getElementById('panel'); |
016 | this.div = this.pan.getElementsByTagName('div'); |
017 | this.scr.onselectstart = function () { return false; }; |
018 | this.scr.ondrag = function () { return false; }; |
019 | for (var i = 0, o; o = this.div[i]; i++) { |
020 | if (o.className == 'unit') { |
021 | // legend |
022 | o.l = document.createElement('div'); |
023 | o.l.className = 'info'; |
024 | o.appendChild(o.l); |
025 | // hover |
026 | o.r = document.createElement('div'); |
027 | o.r.className = 'hover'; |
028 | o.appendChild(o.r); |
029 | o.r.x = 0; |
030 | o.r.l = o.l; |
031 | o.r.p = 0; |
032 | o.r.s = 2; |
033 | o.r.m = false; |
034 | o.img = o.r.img = o.getElementsByTagName('img')[0]; |
035 | o.r.c = Math.random() * 100; |
036 | o.r.o = o; |
037 | sP.R[sP.N] = o.r; |
038 | sP.I[sP.N] = o.img.src; |
039 | sP.L[sP.N] = o.title; |
040 | o.title = ''; |
041 | sP.N++; |
042 | // mouse over effect |
043 | o.r.onmouseover = function () { |
044 | if (!this.m && this.img.complete) { |
045 | // walk through images |
046 | if (sP.O != this && !this.n) { |
047 | this.x = this.o.offsetWidth; |
048 | this.l.innerHTML = sP.L[sP.Id]; |
049 | this.img.src = sP.I[sP.Id]; |
050 | this.resize(); |
051 | this.n = true; |
052 | if(++sP.Id >= sP.N) { |
053 | sP.Id = 0; |
054 | for (var i = 0, o; o = sP.R[i]; i++) o.n = false; |
055 | } |
056 | } |
057 | if (sP.O) { |
058 | sP.O.s = 2; |
059 | sP.C.push(sP.O); |
060 | } |
061 | this.m = true; |
062 | sP.O = this; |
063 | sP.Or = this; |
064 | } |
065 | }; |
066 | // resize |
067 | o.r.resize = function () { |
068 | var i = new Image(); |
069 | i.src = this.img.src; |
070 | this.img.style.width = (i.width < this.offsetWidth) ? Math.round(this.offsetWidth * 1.25) + 'px' : Math.round(i.width) + 'px'; |
071 | this.img.style.height = (i.height < this.offsetHeight) ? Math.round(this.offsetHeight * 1.25) + 'px' : Math.round(i.height) + 'px'; |
072 | this.w = (this.img.offsetWidth - this.offsetWidth) * 0.5; |
073 | this.h = (this.img.offsetHeight - this.offsetHeight) * 0.5; |
074 | this.img.style.visibility = 'visible'; |
075 | }; |
076 | } |
077 | } |
078 | // start |
079 | sP.resize(); |
080 | sP.run(); |
081 | }, |
082 | resize : function () { |
083 | // resize window |
084 | var o = sP.scr; |
085 | sP.nw = o.offsetWidth; |
086 | sP.nh = o.offsetHeight; |
087 | sP.iw = sP.pan.offsetWidth; |
088 | sP.ih = sP.pan.offsetHeight; |
089 | for (sP.nx = 0, sP.ny = 0; o !== null; o = o.offsetParent) { |
090 | sP.nx += o.offsetLeft; |
091 | sP.ny += o.offsetTop; |
092 | } |
093 | for (var i = 0, o; o = sP.R[i]; i++) { o.resize(); } |
094 | }, |
095 | // loop |
096 | run : function () { |
097 | // scroll main area |
098 | 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; |
099 | 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; |
100 | sP.pan.style.left = Math.round(sP.cx) + 'px'; |
101 | sP.pan.style.top = Math.round(sP.cy) + 'px'; |
102 | // image moving and legend |
103 | if(sP.O) { |
104 | sP.O.c += 0.02; |
105 | sP.O.img.style.left = Math.round(-sP.O.w + sP.O.w * Math.sin(sP.O.c * 1.1)) + 'px'; |
106 | sP.O.img.style.top = Math.round(- sP.O.h + sP.O.h * Math.sin(sP.O.c)) + 'px'; |
107 | sP.O.l.style.left = Math.round(sP.O.x--) + 'px'; |
108 | } |
109 | // hover up |
110 | if (sP.Or) { |
111 | sP.Or.p -= sP.Or.s; |
112 | sP.Or.s *= 1.8; |
113 | if (sP.Or.p < -sP.Or.offsetHeight) { |
114 | sP.Or.p = -sP.Or.offsetHeight; |
115 | sP.Or.s = 2; |
116 | sP.Or.m = false; |
117 | sP.Or = false; |
118 | } |
119 | sP.O.style.top = Math.round(sP.O.p) + 'px'; |
120 | } |
121 | // hover down |
122 | for (var i = 0, c; c = sP.C[i]; i++) { |
123 | if (c != sP.Or) { |
124 | c.p += c.s; |
125 | c.s *= 1.2; |
126 | if (c.p >= 0) { |
127 | c.p = 0; |
128 | c.s = 2; |
129 | c.m = false; |
130 | sP.C.splice(i, 1); |
131 | } |
132 | c.style.top = Math.round(c.p) + 'px'; |
133 | } else { |
134 | c.s = 2; |
135 | c.m = false; |
136 | sP.C.splice(i, 1); |
137 | } |
138 | } |
139 | setTimeout(sP.run, 16); |
140 | } |
141 | }; |
142 | // on mouse position functionality |
143 | document.onmousemove = function(e) { |
144 | if (window.event) { e = window.event; } |
145 | xm = e.clientX; |
146 | ym = e.clientY; |
147 | return false; |
148 | }; |
149 | // start gallery onload |
150 | function startGallery() { |
151 | sP.init(); |
152 | onresize = sP.resize; |
153 | } |
154 | if (window.attachEvent) { window.attachEvent('onload', startGallery); } |
155 | 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:
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!
