jQuery的灯箱插件 ColorBox
jopen 12年前
<p><a href="/misc/goto?guid=4958200612006467914" target="_blank">ColorBox</a>是一个基于jQuery 的轻量级，自定义灯箱插件，功能非常强大，支持图片，图片组，ajax，inline和iframed内容，灯箱样式完全由用户控制，可自定义CSS样 式，不需要改写ColorBox库文件就能重写展示效果设置，支持加载预处理提示等等，效果图如下：</p> <p><img title="jQuery的灯箱插件 ColorBox" border="0" alt="jQuery的灯箱插件 ColorBox" src="https://simg.open-open.com/show/bafc2b14b070963e1e1bfc602631a38d.png" width="500" height="346" /></p> <p><strong>使用说明</strong><br /> <a href="/misc/goto?guid=4958200612754615769">1，jQuery 库文件</a><br /> <a href="/misc/goto?guid=4958200613492926426" target="_blank">2，colorbox 库文件</a><br /> 3，灯箱效果CSS样式文件</p> <p><strong>使用实例如下：</strong><br /> <strong>一，使用ColorBox灯箱显示一张图片和图片组</strong><br /> <strong>(1)js部分</strong><br /> $.fn.colorbox.settings.<strong>transition </strong>= "fade";<br /> $.fn.colorbox.settings.<strong>bgOpacity </strong>= "0.9";<br /> $.fn.colorbox.settings.<strong>contentCurrent </strong>= "image {<strong>current</strong>} of {<strong>total</strong>}";<br /> $(".<strong>cpModal</strong>").<strong>colorbox</strong>();</p> <p><strong>transition</strong>设置ColorBox灯箱的过渡效果，如上：fade<br /> <strong>bgOpacity</strong>设置ColorBox灯箱的背景透明度，如上：0.9<br /> <strong>contentCurrent</strong>设置ColorBox灯箱的当前图片，如上：image {current} of {total}</p> <p><strong>(2)HTML部分</strong><br /> </p> <p><a class="<strong>cpModal</strong>" href="http://www.open-open.com/news/admin/edit/marylou.jpg" kesrc="marylou.jpg">单张图片</a></p> <br /> <p><a class="<strong>cpModal</strong>" href="http://www.open-open.com/news/admin/edit/biuuu1.jpg" kesrc="biuuu1.jpg">图片组1</a></p> <br /> <p><a class="<strong>cpModal</strong>" href="http://www.open-open.com/news/admin/edit/biuuu2.jpg" kesrc="biuuu2.jpg">图片组2</a></p> <br /> <p><a class="<strong>cpModal</strong>" href="http://www.open-open.com/news/admin/edit/biuuu3.jpg" kesrc="biuuu3.jpg">图片组3</a></p> <p></p> <p><strong>二，使用ColorBox灯箱显示ajax加载HTML页面</strong><br /> <strong>(1)js部分</strong><br /> $("#ajax").<strong>colorbox</strong>({<strong>contentWidth</strong>:"300px", <strong>contentHeight</strong>:"195px"});</p> <p><strong>contentWidth</strong>设置ColorBox灯箱的内容宽度，如上：300px<br /> <strong>contentHeight</strong>设置ColorBox灯箱的内容高度，如上：195px</p> <p><strong>(2)HTML部分</strong><br /> </p> <p><a id="<strong>ajax</strong>" href="http://www.open-open.com/news/admin/edit/%3Cstrong%3Eajax.html%3C/strong%3E" kesrc="%3Cstrong%3Eajax.html%3C/strong%3E">Ajax HTML</a></p> <br /> <strong>ajax.html</strong>表示加载的html页面， <p></p> <p><strong>三，使用ColorBox灯箱显示flash页面效果</strong><br /> <strong>(1)js部分</strong><br /> $("#<strong>flash</strong>").<strong>colorbox</strong>({<strong>contentAjax</strong>:"<strong>flash.html</strong>"});</p> <p><strong>(2)HTML部分</strong></p> <p></p> <p><a id="<strong>flash</strong>" href="/misc/goto?guid=4958200614278890941" kesrc="http://www.油Tube.com/watch?v=lBvaHZIrt0">Flash / Video</a></p> <strong><br /> 四，使用ColorBox灯箱显示Inline HTML效果</strong> <br /> <strong>(1)js部分</strong> <br /> $("# <strong>inline</strong>").colorbox({ <strong>contentWidth</strong>:"500px", <strong>contentInline</strong>:"#inline-content"}); <br /> <strong>contentInline</strong>设置ColorBox灯箱的inline内容 <p></p> <p><strong>(2)HTML部分</strong><br /> </p> <p><a id="<strong>inline</strong>" href="http://www.open-open.com/news/admin/edit/1956ad8#" kesrc="#">Inline HTML</a></p> <br /> <div style="display:none;"> <br /> <div id="<strong>inline-content</strong>"> <br /> <div style="padding-bottom:10px;padding-left:10px;padding-right:10px;padding-top:10px;"> <br /> <p>必优博客</p> <br /> <p>www.biuuu.com</p> <br /> </div> <br /> </div> <br /> </div> <br /> <strong>五，使用ColorBox灯箱显示Iframed框架内容效果</strong> <br /> <strong>(1)js部分</strong> <br /> $("# <strong>google</strong>").colorbox({ <strong>contentWidth</strong>:"750px", <strong>contentHeight</strong>:"450px", contentIframe:true}); <p></p> <p><strong>contentIframe</strong>设置ColorBox灯箱的内容是否为框架</p> <p><strong>(2)HTML部分</strong><br /> </p> <p><a id="<strong>google</strong>" href="/misc/goto?guid=4958200615020177995" kesrc="http://www.google.com">Iframed内容</a></p> <p></p> <p><strong>ColorBox灯箱配置如下：</strong><br /> <strong>transition </strong>'elastic' 表示灯箱过渡效果，可选"elastic" or "fade"<br /> transitionSpeed 350 表示灯箱过渡效果展示的速度<br /> initialWidth 300 表示灯箱初始化宽度<br /> initialHeight 100 表示灯箱初始化高度<br /> contentWidth false 表示是否设置一个固定的宽度<br /> contentHeight false 表示是否设置一个固定的高度<br /> contentAjax false 表示是否是一个ajax加载<br /> contentInline false 表示是否是一个inline<br /> contentIframe false 表示是否是一个iframe<br /> <strong>bgOpacity </strong>0.85 表示灯箱的背景透明度<br /> preloading true 表示是否预加载<br /> contentCurrent '{current} of {total}' 表示灯箱展示的当前图片和总数<br /> contentPrevious 'previous' 表示上一个锚，类似于rel属性<br /> contentNext 'next' 表示下一个锚，类似于rel属性<br /> modalClose 'close' 锚文本关闭链接，可选Esc或close</p> <p>jQuery插件ColorBox彩盒使用非常简单，可实现功能非常多，如弹出新窗口，弹出图片，弹出框架等等，值得推荐。</p> <h3>Version 1.3.18 - October 07 2011</h3> <p>Files Changed:jquery.colorbox.js/jquery.colorbox-min.js, colorbox.css (all) and example 1's controls.png</p> <ul> <li>Fixed a regression where Flash content displayed in ColorBox would be reloaded if the browser window was resized.</li> <li>Added safety check to make sure that ColorBox's markup is only added to the DOM a single time, even if $.colorbox.init() is called multiple times. This will allow site owners to manually initialize ColorBox if they need it before the DOM has finished loading.</li> <li>Updated the example index.html files to be HTML5 compliant.</li> <li>Changed the slideshow behavior so that it immediately moves to the next slide when the slideshow is started.</li> <li>Minor regex bugfix to allow automatic detection of image URLs that include fragments.</li> </ul> <p>下载地址：<a href="/misc/goto?guid=4958200615758806186">colorbox.zip</a></p>