Tạo hiệu ứng gallery ảnh sử dụng Tomorrow again Script
 Tomorrow again là một script do Dhteumeuleu phát triển dùng cho gallary ảnh với một hiệu ứng khá độc đáo. Bạn có thể xem Demo tại trang Dhteumeuleu.
 Bạn cũng có thể áp dụng hiệu ứng này cho website hoặc blogspot của bạn theo các bước sau đây theo thứ tự Script >> CSS >> HTML.

  
(Bạn cũng có thể kéo xuống cuối bài viết này để xem Demo)
☼ Cách tiến hành:
   1- Đăng nhập vào Blog
   2- Vào thiết kế
   3- Chọn Chỉnh sử HTML (Không cần mở rộng tiện ích mẫu)
   4- Thêm đoạn code sau vào trước thẻ  </head> .
<script type='text/javascript' src='http://dl.dropbox.com/u/70549761/File-phu/namkna-blogspot-com/tomorrowagain.js' ></script>
- Nếu bạn không muốn mất côgn upload file javascrip trên lên host thì bạn có thể chèn đoạn code thay thế bên dưới.
<script type='text/javascript'>
//<![CDATA[
var xm = 0;
var ym = 0;
document.onmousemove = function(e){
if (window.event) e=window.event;
xm = e.clientX;
ym = e.clientY;
}
var panel = {
speed : .006,
t : 0,
O : [],
over : false,

run : function() {
panel.t += panel.speed;
for (var i = 0, o; o = panel.O[i]; i++)
o.anim(i + panel.t);
},
init : function(){
for (var i = 0, o; o = document.images[i]; i++){
if (o.className.indexOf('panel') >= 0) {
var div = document.createElement("div");
div.className = 'panel';
var img = document.createElement("img");
img.src = o.src;
img.className = 'imgPanel';
o.parentNode.replaceChild(div,o);
div.appendChild(img);
div.ims = img.style;
div.iw = img.width;
div.ih = img.height;
div.cx = -div.iw / 2;
div.cy = -div.ih / 2;
div.anim = function(t) {
nw = this.offsetWidth;
nh = this.offsetHeight;
if (panel.over == this){
for (var nx = 0, ny = 0, o = this; o != null; o = o.offsetParent) nx += o.offsetLeft, ny += o.offsetTop;
var x = Math.max(-this.iw + nw, Math.min(0, (-(xm - nx) * (this.iw - nw)) / nw));
var y = Math.max(-this.ih + nh, Math.min(0, (-(ym - ny) * (this.ih - nh)) / nh));
// if (Math.abs(xm-nx-nw * .5) > nw || Math.abs(ym-ny-nh * .5) > nw ) panel.over = false;
} else {
var mx = (this.iw - nw) * .5;
var my = (this.ih - nh) * .5;
var x = -mx * (1 + Math.cos(t * 1.2));
var y = -my * (1 + Math.sin(t));
}
this.cx += (x - this.cx) * .1;
this.cy += (y - this.cy) * .1;
this.ims.left = Math.round(this.cx) + 'px';
this.ims.top = Math.round(this.cy) + 'px';
}
div.onmouseover = function() { panel.over = this; }
div.onclick = function() {
document.getElementById('imagenREAL').src=this.children[0].src;
}

this.O.push(div);
}
}
setInterval(panel.run, 32);
}
}
//]]>
</script>
   5- Đặt đoạn CSS sau đây vào trước thẻ </head>.
<style type='text/css'>
#screen { /* the container */
margin: 0 auto;
overflow: hidden;
/* the width and height we will calculate according to the size defined in panel */
height: 500px;
width: 400px;
}

/* the images */
.panel {
float: left;
margin: 5px;
overflow: hidden;
position: relative;
/* this is the width and height of each square which have the effect */
height: 150px;
width: 150px;
}
.imgPanel {
border: none;
position: absolute;
text-decoration: none;
}

/* the image you see in reality */
#imageREAL {
display:block;
margin:0 auto;
/* if you don’t limit the size of images, remove it */
max-height: 350px;
max-width: 350px;
}
</style>
- Bạn có thể điều chỉnh các tham số về chiều rộng (width) và chiều cao (height) tùy theo ý thích.
    6-  Thiết lập cấu trúc HTML như sau và đặt tại vị trí cần bố trí gallery ảnh, trong phần thân trang web.
<div id="screen">
<img class="panel" src="URL_hình ảnh 1" />
<img class="panel" src="URL_hình ảnh 2" />
<img class="panel" src="URL_hình ảnh 3" />
<!-- tiếp tục thêm các thẻ img theo cấu trúc tương tự -->
</div>
<img id="imageREAL" src="URL_hình ảnh 1" />
<script type="text/javascript"> window.onload= function(){panel.init();} </script>
Bấm vào đây để xem Demo: 330x490 | 490x320




Chúc thành công!