修改Thickbox，预加载图片和点击图片前后浏览

2011了，大家新年好！

外面寒冷，躲在家里写写博客还是挺好的。

今天为我的博客修改了下jQuery的Thickbox，增加了预加载图片功能和点击图片前后浏览的功能。

首先看下效果：

http://www.jinweijie.com/photo/?album=1&gallery=3

 

效果图（看右侧的箭头）

先说说预加载功能

点击图片，当图片加载完毕以后，会自动加载后2张图片，这样，浏览起来会变得很顺畅。

主要代码：

替换thickbox.js中的：

imgPreloader = new Image();
imgPreloader.onload = function(){
imgPreloader.onload = null;

为

 

imgPreloader = new Image();
prevImg = new Image();
nextImg = new Image();
imgPreloader.onload = function(){
imgPreloader.onload = null;

var tb_links = jQuery('a[class="thickbox"]');
var i = -1;
tb_links.each(function(n) { if (this.href == imgPreloader.src) { i = n; } });


if (i != -1) {
    if (i>0) { prevImg.src = tb_links[i-1].href; }
    if (i+1 < tb_links.length) { 
    
        var imgTemp1 = new Image();
        imgTemp1.src = tb_links[i+1].href; 
        
        if(tb_links[i+2]){
            var imgTemp2 = new Image();
            imgTemp2.src = tb_links[i+2].href; 
        }
        
        if(tb_links[i+3]){
            var imgTemp3 = new Image();
            imgTemp3.src = tb_links[i+3].href; 
        }
    }
}

接着是浏览按钮功能

需要3张图片left.gif, right.gif, pixel.gif。分别是左右和div透明背景图。

然后修改thickbox.css，增加：

#divNavControl{
    position: absolute;
    z-index:999;
}

#divPre{
     height: 100%;
    left: 0;
    position: absolute;
    width: 50%;
    background:url(pixel.gif) repeat;
    cursor:pointer;
}

#divNext{
    height: 100%;
    position: absolute;
    right: 0;
    width: 50%;
    background-color:transparent;
    background:url(pixel.gif) repeat;
    cursor:pointer;
}

#imgLeftArrow{
    position:absolute;
    top:45%;
    left:0;
}

#imgRightArrow{
    position:absolute;
    top:45%;
    right:0;
}

最后修改thickbox.js，由于代码太长了，就不贴出来了，大家有兴趣可以看看，或者直接用就行了。

下载请到 http://www.jinweijie.com/javascript/thickbox-add-previous-and-next-button-on-image-like-lightbox/

这里就不上传了。

 

谢谢大家，再次祝大家新年快乐！