`
wuyizhong
  • 浏览: 50582 次
  • 性别: Icon_minigender_2
  • 来自: 南京
社区版块
存档分类
最新评论

colorbox

阅读更多

 

使用实例如下:
一,使用ColorBox灯箱显示一张图片和图片组
(1)js部分

$.fn.colorbox.settings.transition = "fade";
$.fn.colorbox.settings.bgOpacity = "0.9";
$.fn.colorbox.settings.contentCurrent = "image {current} of {total}";
$(".cpModal").colorbox();
 

transition设置ColorBox灯箱的过渡效果,如上:fade
bgOpacity设置ColorBox灯箱的背景透明度,如上:0.9
contentCurrent设置ColorBox灯箱的当前图片,如上:image {current} of {total}

(2)HTML部分

<p><a class="cpModal" href="marylou.jpg" >单张图片</a></p>
<p><a class="cpModal" href="biuuu1.jpg" >图片组1</a></p>
<p><a class="cpModal" href="biuuu2.jpg" >图片组2</a></p>
<p><a class="cpModal" href="biuuu3.jpg" >图片组3</a></p>
 

二,使用ColorBox灯箱显示ajax加载HTML页面
(1)js部分

$("#ajax").colorbox({contentWidth:"300px", contentHeight:"195px"});
 

contentWidth设置ColorBox灯箱的内容宽度,如上:300px
contentHeight设置ColorBox灯箱的内容高度,如上:195px

(2)HTML部分

<p><a id="ajax" href="ajax.html">Ajax HTML</a></p>
 
ajax.html表示加载的html页面,

三,使用ColorBox灯箱显示flash页面效果
(1)js部分

$("#flash").colorbox({contentAjax:"flash.html"});
 

(2)HTML部分

<p><a id="flash" href="http://www.youtube.com/watch?v=lBvaHZIrt0">Flash / Video</a></p>
 
四,使用ColorBox灯箱显示Inline HTML效果

(1)js部分

$("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"});
 
contentInline设置ColorBox灯箱的inline内容

(2)HTML部分

<p><a id="inline" href="#">Inline HTML</a></p>
<div style="display:none">
<div id="inline-content">
<div style="padding:10px">
<p>必优博客</p>
<p>www.biuuu.com</p>
</div>
</div>
</div>
 
五,使用ColorBox灯箱显示Iframed框架内容效果
(1)js部分
$("#google").colorbox({contentWidth:"750px", contentHeight:"450px", contentIframe:true});
 

contentIframe设置ColorBox灯箱的内容是否为框架

(2)HTML部分

<p><a id="google" href="http://www.google.com">Iframed内容</a></p>
 

ColorBox灯箱配置如下:
transition 'elastic' 表示灯箱过渡效果,可选"elastic" or "fade"
transitionSpeed    350 表示灯箱过渡效果展示的速度
initialWidth    300 表示灯箱初始化宽度
initialHeight    100 表示灯箱初始化高度
contentWidth    false 表示是否设置一个固定的宽度
contentHeight    false 表示是否设置一个固定的高度
contentAjax    false 表示是否是一个ajax加载
contentInline    false 表示是否是一个inline
contentIframe    false 表示是否是一个iframe
bgOpacity 0.85 表示灯箱的背景透明度
preloading    true 表示是否预加载
contentCurrent    '{current} of {total}' 表示灯箱展示的当前图片和总数
contentPrevious    'previous' 表示上一个锚,类似于rel属性
contentNext    'next'    表示下一个锚,类似于rel属性
modalClose    'close' 锚文本关闭链接,可选Esc或close

jQuery插件ColorBox彩盒使用非常简单,可实现功能非常多,如弹出新窗口,弹出图片,弹出框架等等,值得推荐。

来自 http://www.biuuu.com/

分享到:
评论

相关推荐

    jquery-colorbox jquery-colorbox

    《jQuery Colorbox:深入解析与应用》 jQuery Colorbox是一款基于jQuery库的轻量级弹出插件,它提供了一种优雅的方式展示图片、HTML内容、IFrame、Ajax以及视频等,极大地丰富了网页的交互体验。在网页设计中,...

    ColorBox样式例子

    在"ColorBox样式例子"中,我们将探讨如何在实际项目中应用和定制ColorBox。 首先,ColorBox的核心功能是创建一个可自定义的弹出窗口,用于显示单张或一组图片。它支持预加载图像,提供平滑的过渡效果,并且可以轻松...

    jQery图片展示效果colorbox带实例

    jQuery Colorbox是一款流行的jQuery插件,它用于创建优雅的、响应式的图片展示效果。这款插件不仅限于图片,还能处理HTML内容、IFRAME、Ajax请求等多种类型的媒体。Colorbox能够提供轻量级的弹出窗口体验,使得在...

    JQuery弹出窗口小插件ColorBox

    **jQuery ColorBox插件详解** 在网页设计中,弹出窗口常常用于展示图片、内容或者进行用户交互,而`jQuery ColorBox`就是这样一个强大的轻量级弹出窗口小插件。它提供了优雅的视觉效果,使得用户体验更加舒适,是...

    jquery colorbox 项目中的成熟使用案例

    《jQuery Colorbox在实际项目中的应用深度解析》 在网页设计和开发中,优雅的弹出层效果常常能提升用户体验,jQuery Colorbox就是一个强大的轻量级插件,它提供了多种类型的弹出展示方式,包括图片、iframe、HTML...

    Colorbox弹出层插件使用API与中文教程

    这个教程将帮助你理解和掌握Colorbox的使用方法,包括其API接口和中文指南。 首先,我们来了解Colorbox的基本用法。在HTML中,你可以通过添加特定的类或者数据属性来标记需要弹出显示的内容。例如,对于图片,可以...

    ColorBox灯箱,jQuery相册查看控件,仿QQ相册,ajax

    《ColorBox:jQuery相册查看控件的深度解析与应用》 ColorBox是一款基于jQuery的轻量级灯箱插件,它以其优雅的界面、强大的功能和良好的用户体验,被广泛应用于网页中的图片、iframe、HTML内容等的弹出展示。这款...

    jquery colorbox 弹出窗

    **jQuery Colorbox** 是一款非常流行的JavaScript库,用于在网页中创建优雅的、可自定义的弹出窗口。它基于jQuery框架,使得开发者能够轻松地实现各种弹出效果,如图片画廊、内联内容、IFrame、Ajax加载以及YouTube...

    图片预览效果(colorBox)

    《图片预览效果:colorBox深度解析》 在网页设计中,图片预览功能是不可或缺的一部分,它能够为用户提供一个方便、快捷的方式来查看大图,而无需跳转到新的页面或者下载图片。colorBox,作为一个优秀的JavaScript...

    colorbox弹出窗口,置顶弹出隐藏层,并且背景置灰 简单示例,简单调用方式,更多调用方式请网上查询资料,仅提供运行所需依赖c

    在压缩包中,可能包含`colorbox.css`和`jquery.colorbox.js`等文件,这些都是实现Colorbox功能所必需的。确保将这些文件添加到你的HTML页面头部或者底部,以便正确加载。 例如,在HTML文件中,你可以这样引用: ``...

    colorbox 弹出窗口 放大图片

    下面将详细介绍Colorbox的功能、使用方法及其实现放大图片的原理。 1. **Colorbox功能**: - **图片画廊**:Colorbox可以轻松实现图片画廊效果,用户可以在弹出窗口中浏览一组相关的图片。 - **内联内容**:除了...

    jquery colorbox弹出层插件制作图片弹出显示代码

    《jQuery Colorbox弹出层插件:实现图片弹出显示的代码详解》 在Web开发中,为了提供更好的用户体验,我们常常需要实现一种效果:当用户点击某个元素时,图片或者其他内容以弹出层的形式展示出来。jQuery Colorbox...

    colorbox弹出层,遮罩,对话框

    在网页设计和开发中,"colorbox"是一个流行的JavaScript库,用于创建优雅的弹出层、遮罩和对话框效果。这个库以其简洁的API和高度可定制性而受到广泛欢迎。下面我们将深入探讨colorbox的功能、用法以及它如何实现...

    jQuery colorbox

    **jQuery colorbox插件详解** `jQuery colorbox`是一款基于jQuery库的轻量级、高度可定制的弹出框插件,通常用于实现轻盒(lightbox)效果。它能够优雅地展示图片、HTML内容、IFrame、YouTube视频等,提供了一种在...

    jquery colorbox

    **jQuery Colorbox** jQuery Colorbox是一款流行的轻量级插件,用于在网页中创建弹出式的图片、HTML、iframe和Ajax等内容展示。它提供了一种优雅的方式来增强用户体验,通过将内容在现有页面上以全屏或半透明的...

    js colorbox

    **JavaScript Colorbox插件详解** Colorbox是一款流行的JavaScript插件,专用于创建优雅的弹出框效果。在网页设计中,弹出框常用于显示图片、视频、内嵌页面等,而Colorbox以其简洁的界面和高度可定制性受到开发者...

    ColorBox-library,为色彩爱好者!一个简单但功能强大的android颜色选择器.zip

    《ColorBox-library:Android平台上的出色颜色选择器》 在移动应用开发中,尤其是在涉及到用户界面设计时,颜色选择器是不可或缺的一部分。ColorBox-library,正如其名,是一款专为色彩爱好者打造的Android颜色选择...

    colorbox 图片轮播

    "Colorbox"是一款流行的JavaScript轻量级插件,主要用于创建响应式、美观的弹出框,尤其适合实现图片轮播功能。在网页设计和开发中,它提供了多种展示方式,可以满足不同需求的图片轮播效果,使得用户体验更加优雅且...

    ColorBox 路由器控制客户端安卓版

    ColorBox 路由器手机控制客户端,手机控制刷了openwrt系统的路由,实现手机看视频,控制aria2脱机下载等功能

Global site tag (gtag.js) - Google Analytics