1.一张图片
描述:
这是ThickBox的一个简单实例,这个例子展示了在中放置一张图片(请看演示)。
说明:
- 创建一个link元素 (<a href>)
- 给创建的这个link元素一个class属性,其值是:thickbox (class="thickbox")
- 在href属性中指定一个张图片地址(.jpg .jpeg .png .gif .bmp)
<a href="Upimg/single.jpg"
title="add a caption to title attribute / or leave blank"
class="thickbox"><img
src="Upimg/single_t.jpg"
alt="Single Image"/></a>
2.多张图片
描述:
这个例子和单张图片差不多,但他允许使用rel属性使多张图片成为一组,在ThickBox里导航。这种完美的使用方法适用于图片集。
使用说明:
- 创建一个link元素 (<a href>)
- 给创建的这个link元素一个class属性,其值是:thickbox; (class="thickbox")
- 在href属性中指定一个张图片地址 (.jpg .jpeg .png .gif .bmp)
- 给每一个link元素一个相同的rel值。(比如:rel="gallery-plants")
重点提醒:
当你打开一个ThickBox图片集的时候, 你能通过键盘的左右箭头键向前和向前和向后导航(在 ThickBox 里也提供了Next和Previous的链接)。 图片将会在图片集中按HTML文档流程从第一张显示到最后一张。
<a href="Upimg/plant1.jpg"
title="add a caption to title attribute / or leave blank"
class="thickbox"
rel="gallery-plants"><img
src="Upimg/plant1_t.jpg"
alt="Plant 1" /></a>
<a href="Upimg/plant2.jpg"
title="add a caption to title attribute / or leave blank"
class="thickbox"
rel="gallery-plants"><img
src="Upimg/plant2_t.jpg"
alt="Plant 2" /></a>
<a href="Upimg/plant3.jpg"
title="add a caption to title attribute / or leave blank"
class="thickbox"
rel="gallery-plants"><img
src="Upimg/plant3_t.jpg"
alt="Plant 3" /></a>
<a href="Upimg/plant4.jpg"
title="add a caption to title attribute / or leave blank"
class="thickbox"
rel="gallery-plants"><img
src="Upimg/plant4_t.jpg"
alt="Plant 4" /></a>
3.内嵌内容
描述:
页面中的内嵌内容,隐藏的或是显示的均可以放置在ThickBox中。
使用说明:
重点提醒:
如果内嵌在ThickBox的内容多于ThickBox显示的尺寸,一个滚动条会出现。请确认ThickBox的尺寸和内容的匹配避免出现滚动条而显示全部内嵌内容。也就是说,如果不想要滚动条,你可以增加ThickBox的宽和高直到内嵌的内容不需要滚动条就能全部显示。
<input alt="#TB_inline?height=300&width=400&inlineId=myOnPageContent"
title="add a caption to title attribute / or leave blank"
class="thickbox"
type="button" value="Show" />
分享到:
相关推荐
jquery插件thickbox的使用方法
js弹出层之JQUERY THICKBOX弹出层插件
ThickBox 是基于 jQuery 用 JavaScript 编写的网页UI对话窗口小部件. 它可以用来展示单一图片, 若干图片, 内嵌的内容, iframed的内容, 或以 AJAX 的混合 modal 提供的内容. 点击这里查看演示 特性: ThickBox 是...
jQuery 中的简单实用的网页中div弹出效果 超酷!
是一个jquery为基础的,可显示图像, divs ,或者远程页面。 它的使用简单,容易。
NULL 博文链接:https://q445862108.iteye.com/blog/1013002
基于jQuery弹出层插件thickbox 智能提示
ThickBox 是一个基于 JQuery 类库的扩展,它能在浏览器界面上显示非常棒的弹出框,它可以显示单图片,多图片,AJAX 请求内容或链接内容。 使用介绍: http://blog.csdn.net/intcry/archive/2010/11/25/6035639.aspx
ThickBox打开框架页 1.显示位置修正; 2.标题栏关闭改图片; 3.点击父页面关闭修正; 4.添加关闭刷新父页面; ...等; 如需更多修改化请自行修改。
thickbox.js插件学习,很实用,很好用,很灵活,可以在iframe里任意定义。入门实例。http://blog.csdn.net/greatverve/archive/2008/12/23/3588955.aspx我的网址:www.0379zd.com
用 jquery 和 thickbox 实现图片浏览
使用thickbox时,经常会往回带值,比如,用thickbox显示上传一张图片,在关闭得时候,将上传后的图片路径返回到原来的页面。类似的操作很多,写了一个小实例,希望能对一些朋友有所帮助。
jQuery Thickbox3.1 弹出层插件
最后在父页面和遮罩层里的文本框中输入值后点登录可以得到这几个文本框的值。 将thickbox.js里的tb_init(domChunk)函数替换为: function tb_init(domChunk) { jQuery(domChunk).click(function() { var t = this...
ThickBox是多功能性的,它提供有對於圖像、內置框架、內嵌內容、AJAX內容 等變化, 在點擊連結後能在網頁形成美觀的透明層展示,在改變瀏覽器大小或捲動捲軸時都能保持居中.
ajax.jquery,thickbox
主要介绍了Jquery弹出层插件ThickBox的使用方法,需要的朋友可以参考下
jQuery thickbox 弹出框 弹出后网页变暗 插件,使用thickbox 可用来显示图片弹框和文字的弹框,比如一些登录框之类的,弹出后,网页背景渐变暗下来,操作完成后网页恢复。thickbox和Lightbox插件之类的功能十分相似...