Javascript动画系列之 —— lightbox实现（一）

　　随着DOM和动态JS、CSS操作的出现，网页的交互性效果变得越来越强大，而比较明显的体会就是日渐丰富多样的图片查看和浏览方式。貌似印证了某句名言：只有你想不到的，没有你做不到的，当然前提是都在如今的技术规范之内。

　　那lightbox是什么样的效果，内部的实现原理是什么，总结起来无非这么几点：

　　①、当点击图片时，就会弹出一个图片覆盖层，而不是直接进入实际图片；

　　②、图片覆盖层显示之时，一个半透明的灰层覆盖整个页面(opacity)，模糊化被覆盖的页面内容；

　　③、图片覆盖层会有一些从图片到图片的导航方法。

　　Lightbox的出现刺激了其他多种类似的图库的发展，这个图库并没有使用任何框架，后面出现的lightbox2使用了jquery。关于这个脚本的更多信息可以从http://www.huddletogether.com/projects/lightbox/中找到。二lightbox2可以从http://lokeshdhakar.com/projects/lightbox2/下载。这两个地址有详细地使用方法，跟使用一般的框架区别不大。

　　其中关键点在于，rel="lightbox"：

<a href="image.jpg" rel="lightbox" title=""></a>
title特性用来显示图片标题，一组相关图片可是如下方式：
<a href="image1.jpg" rel="lightbox[groupName]" title=""></a>

　　使用如下代码可以定位所有Lightbox锚点元素并让它们正确地显示：

var anchors = document.getElementByTagName("a");
for(var i=0,len=anchors.length; i < len; ++i){
    var anchor = anchors[i];
    if(anchor.href && anchor.rel == "lightbox"){     //检测anchor是否存在href特性，跳过没有rel特性不是lightbox的anchor
        anchor.onclick = function(){
            showLightbox(this);
            return false;
        };
    }
}

　　这个图库必须使用分离式脚步编程来完成的，你只需要在页面加载完成时动态注入一些HTML元素和CSS样式。在DOM中注入初始化的HTML并为每个元素绑定必要的事件处理程序，具体的过程如下使用：（注意：本文的代码并非实现代码，而是讲解思路过程，具体的实现过程还需自行完善）

var curImage = null;        //记录当前查看图片
window.onload = function(){
    /*添加如下DOM结构
     *<div id="overlay"></div>
     *<div id="gallery"> 
     *        <div id="gallery_image"></div>
     *        <div id="gallery_prev"><a href="">&laquo; Prev</a></div>
     *        <div id="gallery_next"><a href="">Next &raquo;</a></div>
     *        <div id="gallery_title"></div>
    */</div>
    
    //建立整个图库的外层支架
    var gallery = document.createElement("div");
    gallery.id="gallery";

    //添加所有子元素节点，避免多次操作
    gallery.innerHTML = '<div id="gallery_image"></div>' + 
        '<div id="gallery_perv"><a href="">&laquo; Prev</a></div>' +
　　　　 '<div id="gallery_next"><a href="">Next &raquo;</a></div>' +
　　　　 '<div id="gallery_title"></div>';
　　document.body.appendChild(gallery);

　　//上一张和下一张图片跳转处理事件
　　id("gallery_next").onclick = nextImage;
　　id("gallery_prev").onclick = prevImage;

　　//定位到页面上的所有图库
　　var g = byClass("gallery", "ul");
　　//遍历所有的图库
　　for(var i=0;i<g.length;i++){
　　　　//并定位到幻灯图片的所有链接
　　　　var link = tag("a", g[i]);
　　　　//遍历所有图片链接
　　　　for(var j=0;j<link.length;j++){
　　　　　　//确保做到：当点击的时候，显示图库而不是跳转图片
　　　　　　link[j].onclick = function(){
　　　　　　　　showOverlay();　　　　//显示灰色背景的覆盖层
　　　　　　　　showImage(this.parentNode);　　　　//在图库内显示图片
　　　　　　　　//确保浏览器不会像普通情况下跳转图片
　　　　　　　　return false;
　　　　　　};
　　　　}
　　　　addSlideShow(g[i]);
　　}
};
处理完这个重要的步骤之后，你就可以开始制作图库的各种组件。　

　　半透明的覆盖层

　　制作覆盖层的难点在于：让这个透明的覆盖层能够适合当前页面的高度和宽度。这里创建一个简单的div元素并插入DOM中：

//创建半透明、灰色的覆盖层
var overlay = document.createElement("div");
overlay.id="overlay";

//当点击覆盖层，把图库和它都隐藏
overlay.onclick = hideOverlay;

//把覆盖层插入DOM中
document.body.appendChild(overlay);

　　接下来就是写两个函数来隐藏和出发覆盖层。此处需要注意的是，让覆盖层与当前页面保持一致的宽度和高度，避免用户点击到非覆盖层。

　　隐藏和显示图库半透明覆盖层的两个函数：hideOverlay()、showOverlay()

function hideOverlay(){
    curImage = null;    //确保重置当前图片
    
    hide(id("overlay"));    //隐藏覆盖层和图库，display：none
    hide(id("gallery"));
}

function showOverlay(){
    var over = id("overlay");        //获取覆盖层
    
    over.style.height = pageHeight;    //让覆盖层和页面保持一致的大小
    over.style.width = pageWidth;
    fadeIn(over, 50, 10);      //并渐隐，实现代码此处略
}

　　最后加上必要的CSS，正确地显示半透明的覆盖层，如下所示：

#overlay{
    background: #000;
    opacity: 0.5;
    display:none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    cursor: hand;
}

　　建立了覆盖层并附加到页面后，就可以准备在它上面显示图片了。整个图库需要被包裹在一个容器中，这个容器浮动在半透明覆盖层之上。我们还需要一个函数来显示图库的div，并把图片放到这个div中去。最常用的做法是，判断用户是否在图库中点击了其中图片，然后显示这张图片的大尺寸版本，覆盖在页面的其他元素。

//显示图库的当前图片
function showImage(){
    curImage = cur;    //记住当前处理的图片
    var img = id("gallery_image");        //获取图库图片

    //删除当前图片，若存在的话
    img.firstChild && img.removeChild(img.firstChild);

    //用新图片取而代之
    img.appendChild(cur.firstChild.cloneNode(true));

    //设置图库图片的说明为该图片的alt特性内容
    id("gallery_title").innerHTML = cur.firstChild.firstChild.alt;
    //定位到主图库中
    var gallery = id("gallery");
    
    //设置正确的class
    gallery.className = cur.className;
    fadeIn(gallery, 100, 10);    //平滑地渐隐
    adjust();        //确保图片在屏幕中的位置正确
}

未完待续...