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/

這里就不上傳了。

?

謝謝大家，再次祝大家新年快樂！

轉載于:https://www.cnblogs.com/jinweijie/archive/2011/01/01/thickbox-add-previous-and-next-button-on-image-like-lightbox.html

總結

以上是生活随笔為你收集整理的修改Thickbox，预加载图片和点击图片前后浏览的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。