實現(xiàn)需要在head標簽里加入下列javascript文件；現(xiàn)將jquery和thickbox下載，然后設(shè)置相應路徑；
12 | <script type="text/javascript" src="文件夾路徑/jquery.js"></script><script type="text/javascript" src="文件夾路徑/thickbox.js"></script> |
將css文件和loadinganimation.gif及macffbghack.png也上傳到你的網(wǎng)站；接下來加入css文件到head標簽里
同時要在css里修改 1 | .tb_overlaymacffbghack {background: url(macffbghack.png) repeat;} |
將url(macffbghack.png)設(shè)置為你的文件路徑；
有單個圖片、圖片展覽、內(nèi)容、iframe和ajax內(nèi)容；
1.單張圖片是建立一個a標簽，給鏈接a加個class名為thickbox，同時將要顯示圖片包含在鏈接里如下：
<a href="images/single.jpg" class="thickbox"><img src="images/single_t.jpg" /></a>2、圖片展覽同樣建立多個a標簽，給鏈接a加個class名為thickbox，還有給rel設(shè)置相同的值，
1234 | <a href="images/plant1.jpg" class="thickbox" rel="gallery-plants"><img src="images/plant1_t.jpg" alt="plant 1" /></a><a href="images/plant2.jpg" class="thickbox" rel="gallery-plants"><img src="images/plant2_t.jpg" alt="plant 2" /></a><a href="images/plant3.jpg" class="thickbox" rel="gallery-plants"><img src="images/plant3_t.jpg" alt="plant 3" /></a><a href="images/plant4.jpg" class="thickbox" rel="gallery-plants"><img src="images/plant4_t.jpg" alt="plant 4" /></a> |
3、顯示內(nèi)容也要建立一個a標簽或者input ，給它加個class名為thickbox，為input標簽設(shè)置alt=”#tb_inline?height=高度&width=寬度&inlineid=要顯示內(nèi)容id”或a標簽設(shè)置href=”#tb_inline?height=高度&width=寬度&inlineid=要顯示內(nèi)容id”&modal=true”,其中modal=true為設(shè)置另一種關(guān)閉模式；默認不設(shè)置；接著要給需要顯示的內(nèi)容加上id=”要顯示內(nèi)容id”;id自己設(shè)定要與上邊鏈接為同一值；高度、寬度根據(jù)實際需要設(shè)置如下,可以事先將要顯示內(nèi)容css設(shè)置為：display:none;
1234 | <input alt="#tb_inline?height=300&width=400&inlineid=myonpagecontent" type="button" value="show" class="thickbox" /><div id="myonpagecontent">要顯示的內(nèi)容</div><a href="#tb_inline?height=155&width=300&inlineid=hiddenmodalcontent&modal=true" class="thickbox">show hidden modal content.</a><div id="hiddenmodalcontent">要顯示的內(nèi)容</div> |
4.iframe建立一個a標簽，給鏈接a加個class名為thickbox，a設(shè)置標簽的href=”要顯示的網(wǎng)頁地址或者php文件地址?keepthis=true&tb_iframe=true&height=高度&width=寬度”；還有另一種關(guān)閉模式：href=”要顯示的網(wǎng)頁地址或者php文件地址?placevaluesbeforetb_=savedvalues&tb_iframe=true&height=高度&width=寬度&modal=true”
123 | <a href="ajax.php?keepthis=true&tb_iframe=true&height=250&width=400" class="thickbox">example 1</a><a href="ajaxoverflow.htm?keepthis=true&tb_iframe=true&height=300&width=500" class="thickbox">example 2</a><a href="iframemodal.html?placevaluesbeforetb_=savedvalues&tb_iframe=true&height=200&width=300&modal=true" class="thickbox">open iframe modal</a> |
5.ajax內(nèi)容建立一個a標簽，給鏈接a加個class名為thickbox，a設(shè)置標簽的href=”要顯示的ajax文件地址?height=高度&width=寬度，例如：
1 | <a href="ajaxoverflow.html?height=300&width=300" class="thickbox">scrolling content</a> |
下面是一個內(nèi)容顯示的例子：
[ctrl+a 全部選擇 提示：你可先修改部分代碼，再按運行]
新聞熱點
疑難解答
圖片精選
