`

jQuery插件ThickBox

阅读更多
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="#" onclick="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>
分享到:
评论

相关推荐

    jQuery插件ThickBox打开框架页

    **jQuery插件ThickBox详解** ThickBox是一款流行的jQuery插件,用于创建弹出式窗口,常用于显示图片、HTML内容、IFrame(框架页)等。它为用户提供了一种优雅的方式,以全屏模式展示内容,同时提供了一个可自定义的...

    jquery插件thickbox的使用方法

    ### jQuery插件ThickBox的使用详解 #### 引言 ThickBox是基于jQuery库的一个强大而灵活的模态对话框插件,它能够帮助开发者轻松地在网页上创建弹出窗口,显示图片、HTML内容或外部网页。本文将详细介绍如何在项目...

    jquery插件thickbox遮罩层的的使用

    本文将详细讲解如何利用jQuery插件Thickbox创建一个遮罩层,为用户提供更好的浏览体验。 Thickbox是一款轻量级的jQuery插件,它能够创建全屏弹出窗口,用于展示图片、视频或者任何网页内容。这个插件常用于创建类似...

    修改jquery插件thickbox 的close or esc key提示为 关闭 or 按Esc 键关闭

    标题中的“修改jquery插件thickbox 的close or esc key提示为 关闭 or 按Esc 键关闭”指的是在使用jQuery插件Thickbox时,用户希望将默认的英文提示“Close”或“ESC key to close”更改为中文的“关闭”或“按Esc键...

    jQuery插件thickbox遮罩层的使用及demo演示示例.rar

    ThickBox 是基于 jQuery 用 JavaScript 编写的网页UI对话窗口小部件. 它可以用来展示单一图片, 若干图片, 内嵌的内容, iframed的内容, 或以 AJAX 的混合 modal 提供的内容. 点击这里查看演示 特性: ThickBox 是...

    jQuery插件thickbox

    thickbox.js插件学习,很实用,很好用,很灵活,可以在iframe里任意定义。入门实例。http://blog.csdn.net/greatverve/archive/2008/12/23/3588955.aspx我的网址:www.0379zd.com

    Jquery插件ThickBox

    ThickBox 是一个基于 JQuery 类库的扩展,它能在浏览器界面上显示非常棒的弹出框,它可以显示单图片,多图片,AJAX 请求内容或链接内容。 使用介绍: http://blog.csdn.net/intcry/archive/2010/11/25/6035639.aspx

    基于jQuery弹出层插件thickbox

    【jQuery弹出层插件thickbox】是一种广泛使用的JavaScript库,它基于强大的jQuery框架,为网页添加了优雅且功能丰富的弹出层效果。 Thickbox主要用于创建全屏背景的图片查看器、轻量级的模态对话框以及iframe加载等...

    jquery.thickBox

    **jQuery ThickBox** 是一个基于 **jQuery** 库的弹出层插件,它允许开发者在网页中创建优雅的、全屏的、响应式的轻量级弹窗效果。ThickBox 强调用户体验,提供了图片、iframe、多媒体内容(如视频和音频)以及纯...

    jQuery_thickbox3.1

    **jQuery_thickbox3.1** 是一个基于流行的JavaScript库jQuery构建的插件,用于创建弹出式的轻量级对话框。这个插件允许用户在当前网页上展示图像、HTML div元素,甚至远程页面,无需离开当前浏览环境,极大地提升了...

    应用js框架Jquery中ThickBox制作网页中div弹出效果

    其中,jQuery 的一个流行插件——ThickBox,就是一个用于创建全屏弹出效果的工具,尤其适合展示图片、视频或者任何网页内容。ThickBox 结合了 jQuery 的简洁性和强大的功能,使得在网页中实现 div 弹出效果变得非常...

    jquery 弹出层插件 ThickBox 多功能弹出层插件支持...

    jquery 弹出层插件 ThickBox 多功能弹出层插件支持... jquery 弹出层插件 ThickBox 多功能弹出层插件支持... jquery 弹出层插件 ThickBox 多功能弹出层插件支持...

    thickbox3.1实例

    总结起来,“thickbox3.1实例”是一个展示如何使用Cody Lindley的jQuery插件Thickbox来创建动态、互动的弹出窗口的实例。通过理解和实践这些示例,开发者可以将Thickbox集成到自己的网站中,为用户提供更丰富、更...

    Jquery弹出层插件thickbox的下载及学习讲解

    **jQuery弹出层插件Thickbox:深度解析与学习指南** Thickbox是一款非常流行的jQuery插件,它为网页提供了优雅的、全屏的弹出层效果,用于展示图片、HTML内容、Iframe和多媒体资源。这款插件以其易用性和丰富的功能...

    jquery插件和例子 图片播放器 lightbox thickbox 手风琴 树 分页

    jquery插件和例子 图片播放器 lightbox thickbox 手风琴 树 分页jquery插件和例子 图片播放器 lightbox thickbox 手风琴 树 分页jquery插件和例子 图片播放器 lightbox thickbox 手风琴 树 分页

    jQuery Thickbox3.1 弹出层插件

    jQuery Thickbox3.1是一款基于JavaScript库jQuery的弹出层插件,用于创建美观、功能丰富的弹出对话框。在网页设计中,弹出层常用于显示图片、视频、iframe内容或者任何HTML元素,而无需离开当前页面。Thickbox3.1...

    thickbox插件(jquery.js-thickbox.js-thickbox.css)含三个文件

    ThickBox是一款基于jQuery的轻量级弹出插件,主要包含三个核心文件:`jquery.js`、`thickbox.js`和`thickbox.css`。这些文件协同工作,为网页提供了一种优雅的方式,以全屏或者半透明背景的形式展示图片、内嵌框架、...

    jquery插件使用方法大全

    5. **插件支持**:jQuery有一个庞大的插件生态系统,如JTip、ThickBox等,提供额外的功能,如提示框、模态对话框等。这些插件通常设计简洁,易于集成。 6. **动画效果**:jQuery的动画效果如`.fadeIn()`和`.fadeOut...

Global site tag (gtag.js) - Google Analytics