<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ColorBox Examples</title>
<style type="text/css">
body{font:12px/1.2 Verdana, Arial, san-serrif; padding:0 10px;}
a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
h2{font-size:13px; margin:15px 0 0 0;}
</style>
<link type="text/css" media="screen" rel="stylesheet" href="colorbox.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="../colorbox/jquery.colorbox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='example1']").colorbox();
$("a[rel='example2']").colorbox({transition:"fade"});
$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
$("a[rel='example4']").colorbox({slideshow:true});
$(".example5").colorbox();
$(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".example7").colorbox({width:"80%", height:"80%", iframe:true});
$(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
$(".example9").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
</head>
<body>
<h1>ColorBox Demonstration</h1>
<h2>Elastic Transition</h2>
<p><a href="../content/ohoopee1.jpg" rel="example1" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p><a href="../content/ohoopee2.jpg" rel="example1" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a href="../content/ohoopee3.jpg" rel="example1" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
<h2>Fade Transition</h2>
<p><a href="../content/ohoopee1.jpg" rel="example2" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p>
<p><a href="../content/ohoopee2.jpg" rel="example2" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a href="../content/ohoopee3.jpg" rel="example2" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
<h2>No Transition + fixed width and height (75% of screen size)</h2>
<p><a href="../content/ohoopee1.jpg" rel="example3" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p><a href="../content/ohoopee2.jpg" rel="example3" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a href="../content/ohoopee3.jpg" rel="example3" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
<h2>Slideshow</h2>
<p><a href="../content/ohoopee1.jpg" rel="example4" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p><a href="../content/ohoopee2.jpg" rel="example4" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a href="../content/ohoopee3.jpg" rel="example4" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
<h2>Other Content Types</h2>
<p><a class='example5' href="../content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p>
<p><a class='example5' href="../content/flash.html" title="Royksopp: Remind Me">Flash / Video (Ajax/Embedded)</a></p>
<p><a class='example6' href="http://www.youtube.com/v/617ANIA5Rqs" title="The Knife: We Share Our Mother's Health">Flash / Video (Iframe/Direct Link To YouTube)</a></p>
<p><a class='example7' href="http://google.com">Outside Webpage (Iframe)</a></p>
<p><a class='example8' href="#">Inline HTML</a></p>
<h2>Demonstration of using callbacks</h2>
<p><a class='example9' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p>
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
<div id='inline_example1' style='padding:10px; background:#fff;'>
<p><strong>This content comes from a hidden element on this page.</strong></p>
<p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.<br />
<a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>
<p><strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p>
<p>Updating Content Example:<br />
<a class="example5" href="../content/flash.html">Click here to load new content</a></p>
</div>
</div>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
colorbox.rar (58个子文件)
colorbox
content
homer.jpg 9KB
ohoopee3.jpg 114KB
marylou.jpg 76KB
ajax.html 427B
ohoopee2.jpg 151KB
flash.html 689B
Thumbs.db 19KB
ohoopee1.jpg 111KB
colorbox
jquery.colorbox-min.js 9KB
jquery.colorbox.js 23KB
jquery.min.js 56KB
colorbox.ai 230KB
example3
colorbox.css 2KB
images
controls.png 2KB
loading.gif 9KB
index.html 5KB
example2
colorbox.css 2KB
images
controls.png 570B
loading.gif 9KB
Thumbs.db 5KB
index.html 5KB
example4
colorbox.css 4KB
images
border1.png 896B
loading.gif 9KB
internet_explorer
borderTopLeft.png 405B
borderTopRight.png 465B
borderBottomCenter.png 153B
borderBottomRight.png 470B
borderTopCenter.png 143B
borderMiddleLeft.png 154B
borderMiddleRight.png 148B
borderBottomLeft.png 473B
border2.png 183B
index.html 5KB
README 16KB
example1
colorbox.css 5KB
images
overlay.png 182B
loading_background.png 157B
controls.png 1KB
border.png 112B
loading.gif 9KB
Thumbs.db 7KB
internet_explorer
borderTopLeft.png 216B
borderTopRight.png 214B
borderBottomCenter.png 111B
borderBottomRight.png 217B
borderTopCenter.png 111B
Thumbs.db 6KB
borderMiddleLeft.png 108B
borderMiddleRight.png 108B
borderBottomLeft.png 215B
index.html 5KB
example5
colorbox.css 3KB
images
loading_background.png 166B
controls.png 2KB
border.png 163B
loading.gif 9KB
index.html 5KB
共 58 条
- 1
DomoYao
- 粉丝: 13
- 资源: 29
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
前往页