JQ插件简单图片弹窗查看器

时间:2014-04-06  发布人:SHX  浏览次数:1955  评论:0

thickbox插件

效果演示:http://www.blueidea.com/articleimg/2007/12/5182/tickbox_demo.html

1.使用前需先在<head>中引入3个文件

<script src="jquery-1.1.3.1.pack.js" type="text/javascript"></script>                
/*jquery库*/
<script src="thickbox-compressed.js" type="text/javascript"></script>        
/*thickbox插件*/
<link rel="stylesheet" href="thickbox.css" type="text/css" />                        
/*弹出层样式*/

2.相关参数

thickbox插件就是一个<a></a> a标签调用的,所以他的相关参数也就是a标签有关

class="thickbox"                                
调用特效(必须) //也就是调用插件的a标签的class中必须有thickbox
height                                               
打开页面的高度;
width                                                
打开页面的宽度;
title="Iframe(Auto Hide)"                  
title的内容;
keepThis=true                                   
TB_iframe=true                                 
设置后iframe中的thickbox还有效果 (适用于thickbox嵌套)
#TB_inline                                        
调用当前页面的层;
inlineId                                             
当前页面层的ID;
modal=true                                       
表示禁用title,去掉即可显示title及可自动关闭;

3.具体的应用可分为以下几种

1> 单个图片

<a href="big.jpg" title="点击小图看大图" class="thickbox"><img src="small.jpg" alt="Single Image" /></a> /*title控制显示的标题显示*/

2>一组图片 (设置一组相同的rel属性)      

//用 jquery-1.1.3.1.pack.js 时有效,更高级别的JQ库只会出现全屏黑

<a href="1.jpg" title="1" class="thickbox" rel="gallery-plants"><img src="1_t.jpg" alt="Plant 1" /></a>
<a href="2.jpg" title="1" class="thickbox" rel="gallery-plants"><img src="2_t.jpg" alt="Plant 2" /></a>
<a href="3.jpg" title="1" class="thickbox" rel="gallery-plants"><img src="3_t.jpg" alt="Plant 3" /></a>
<a href="4.jpg" title="1" class="thickbox" rel="gallery-plants"><img src="4_t.jpg" alt="Plant 4" /></a>

3>内嵌内容                      

/*可设定弹出层的高度、宽度、inlineId 控制显示的内容、modal控制是否显示标题栏*/

点击按钮显示(属性加在alt中)

<input type="button" alt="#TB_inline?height=200&width=300&inlineId=test" title="按钮" value="显示" class="thickbox" />

点击链接显示(属性加在href中)         

<a href="#TB_inline?height=200&width=300&inlineId=hiddenModalContent&modal=true" title="链接" class="thickbox">显示</a>
<div id="test" style="display:none">这里是隐藏的内容</div>

4>iFramed内容

<a href="boxs.html?keepThis=true&TB_iframe=true&height=100&width=220&modal=true" title="显示IF" class="thickbox">显示</a>

5>Ajax内容

<a href="box.html?height=350&width=350&modal=true" title="Ajax载入,页面无法查看源代码" class="thickbox">Example</a>

4.自定义内容

1>更改右上角的关闭按钮文字"close or esc key"  

修改thickbox-compressed.js。

查找关键字"or esc key",将其删除,并将前面的close更改为[x]或"关闭",然后把文件另存为utf-8格式

2>修改遮罩层透明度

修改thickbox.css。

查找.tb_overlaybg 修改相关数值

3>关闭层:如果我们需要自己添加一个关闭按钮或者图片可以使用:

onclick="self.parent.tb_remove();"

4>thickbox插件默认情况是点击灰色的遮罩层就会关闭取消

把两个$("#tb_overlay").click(tb_remove);去掉就可以取消掉

5. 总结

1>thickbox共有3种关闭弹窗的方式  close按钮 、key(左键点击) 、Esc键 ,可根据自己的需要修改thickbox中对应的代码

2>设置 modal=true时会屏蔽 title栏 此时3种关闭的方式也会清除,关闭方法需自行添加  tb_remove();

源码下载


返回

上一篇:PS制作下雨的几种做法下一篇:英文单词网页上的翻译插件

我要评论

    loading
 

关闭

loading

回顶部