其他特效:jq弹出层插件 之 colorbox 支持图片,图片集,视频和网页弹出显示

系统分类:代码 - 网页代码 - 其他特效 yecha 2015-06-18 14:32:11 上传

版权信息: "其他特效"栏目内,站内会员所分享的全部资料,仅供学习与参考,版权为原作者所有。
yecha加关注
江苏省淮安市 / 设计师
标签:jquery   弹出层   colorbox

使用方法很简单!


先引用必须的文件 

<link rel="stylesheet" href="colorbox.css" />
<script type="text/javascript" src="http://www.52img.cn/js/jquery-1.7.2.min.js"></script>
<script src="jquery.colorbox.js"></script>


然后下面是一些参数说明

		<script>
			$(document).ready(function(){
				//Examples of how to assign the Colorbox event to elements
				$(".group1").colorbox({rel:'group1'}); //图片
				$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390}); //框架加载的 例如视频,网页等等弹出需要
				$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
				$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
				$(".inline").colorbox({inline:true, width:"50%"});
				$(".callbacks").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'); }
				});
			});
		</script>


然后html代码 如下面这样加

<a class="group1" href="content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">弹出图片</a>

<p><a class='youtube' href="http://www.52img.cn/register/ajaxlogin.php">弹出登陆[框架]</a></p>
<p><a class='vimeo' href="http://player.youku.com/player.php/sid/XMTI2NDc5NDU0OA==/v.swf">弹出视频</a></p>
<p><a class='iframe' href="http://www.52img.cn/">弹出网页</a></p>
<p><a class='inline' href="#inline_content">弹出页面内容</a></p>


很简单 分享给大家!

素材人气
  • 浏览:
  • 收藏:
  • 评论:
  • 推荐:
  • 附件下载:
yecha
江苏省淮安市 / 设计师
2015-06-18 14:32:11发布
全部评论()
全部推荐()