0
点赞
收藏
分享

微信扫一扫

jQuery插件ThickBox

紫荆峰 2023-04-07 阅读 99


ThickBox官方文档说明
http://jquery.com/demo/thickbox/
需要使用thickbox.css文件和动态加载提示图片loadingAnimation.gif
在使用中要注意动态加载提示图片的路径,默认路径: images/loadingAnimation.gif

<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /> 

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> 

<script type="text/javascript" src="js/thickbox.js"></script> 


<a href="images/image2.jpg?height=500&width=400" title="mtTitle" 
class="thickbox"><img src="images/thumb_image2.jpg" alt="Single Image"/></a>


这样就实现了一张图片的弹出展示功能,只需要指定图片的class为thickbox,同时注意有一个小图和一张大图,如果需要展示图片库,方法如下:

<a href="biuuu_1.jpg" title="" class="thickbox" 
rel="biuuu_pictures"><img src="biuuu_1_thumb.jpg" alt="图片"/></a> 

<a href="biuuu_2.jpg" title="" class="thickbox" 
rel="biuuu_pictures" ><img src="biuuu_2_thumb.jpg" alt="图片"/></a> 

<a href="biuuu_3.jpg" title="" class="thickbox" 
rel="biuuu_pictures" ><img src="biuuu_3_thumb.jpg" alt="图片"/></a>


如果需要实现图片库的效果,只需要给每个图片增加一个rel属性,如上: rel="biuuu_pictures",这样就会有上一张和下一张的按钮。

其它HTML,IFramed或远程ajax内容弹出框使用方法与图片一样,只不过链接的元素不同,分别如下:
弹出HTML元素内容:path?height=300&width=300&inlineId=myOnPageContent
弹出IFramed内容:path?KeepThis=true&TB_iframe=true&height=400&width=600
弹出ajax内容:path?height=300&width=300
需要指定元素的高度与宽度,并指定相应的弹出元素。


显示隐藏DIV是href="#TB_inline?height=155& amp;width=300& inlineId=hiddenModalContent&modal=true"加了 modal=true时,你需要在DIV中自己手写一个关闭按钮,如<a href="#" οnclick="tb_remove()">关闭</a>这样

其中的 inlineId=hiddenModalContent这一段是隐藏DIV的ID,另两个参数一个高一个宽就不用说了

IFRAME是<a href="Upimg/ajaxOverFlow.html?
keepThis=true&TB_iframe=true&height=300&width=500" title="add a caption to title attribute / or leave blank" class="thickbox">例子2</a>

举报

相关推荐

0 条评论