ThickBox 3.1 套件(类似LightBox,但比较好)

maxmas

ZIY 贵宾
2008-08-27
503
363
46
New Taipei
#1
ThickBox 是 Cody Lindley 使用超轻量级的 jQuery 所开发,
ThickBox是多功能性的,它提供有对于图像、内置框架、内嵌内容、AJAX内容 等变化,在点击连结后能在网页形成美观的透明层展示,在改变浏览器大小或卷动卷轴时都能保持居中.
  • 对于图像能用单一或多张的方式来展示,并能重新调整大于浏览器的图档
  • 能够在透明层中开启内置框架预览网页
  • 开启显示网页中指定的区块内容
  • AJAX Content 载入网页内容

浏览器支援:
Windows IE 6.0, Windows IE 7+, Windows FF 2.0.0.6+, Windows Opera 9.0+,
Macintosh Safari 2.0.4+, Macintosh FF 2.0.0.6+, Macintosh Opera 9.10+

目标:透过ThickBox套件建立网页的图片导览。
1.ThickBox要功成必须下载三个档案分别是thickbox.jsthickbox.cssjQery.js以及载入动画档loadingAnimation.gif
(jquery-latest.js 请改名为 jquery.js)

2.开一个资料夹叫做boxdemo(名字随便你取),把下载的三档案放入,再于其中开一个images的资料夹,把loadingAnimation.gif放进这里。

3.建一个新的网页放在相同的目录。

4.好接下来我们要把thickbox.js以及jQery档连到网页里。方法就是在表头里置入以下两行程式码:
HTML:
到此为止,我们的准备工作已经完成,接下来就开始时做图片导览吧。

5.准备3-5张照片的大图和小图放到images的资料夹,并于网页中插入小图。
浏览附件4728

6.然后替每张小图建立连结,使其连到大图。并于连结语法后加入class="thickbox"

7.再于连结与法处加入rel="gallery"的语法(名字可以自己取,不过每张图的rel都要相同喔!)

8.接下来就可以点按图片看看效果吧。
浏览附件4729

要了解更多可以到官网看看,学习更多进阶的用法。
http://jquery.com/demo/thickbox/
:have a nice day:
 

附件

顶部 底部