colorbox是一个很小的jquery插件,通过调用jquery.colorbox.js文件,我们可以用它来实现页面大图显示的功能。
脚本如下:
这里我们需要指出的几个注意事项:
1.必须先调用jquery.js文件,否则$符号没有办法被识别。
2. 项目中必须包含jquery.colorbox.js文件,并调用。
3. 必须包含样式表及框架图片,否则显示的大图将出现在
页面左上角(样式表大家可以去网站http://colorpowered.com/colorbox/ 下载)
由此便可以实现最简单的大图显示了。
script引用:
<script type="text/javascript" src="../../Scripts/jquery-1.4.1.js" src="Scripts/jquery-1.4.1.js"></script><link media="screen" rel="stylesheet" href="../../Content/colorbox.css" href="Content/colorbox.css" /><script type="text/javascript" src="../../Scripts/jquery.colorbox.js" src="Scripts/jquery.colorbox.js"></script><script type="text/javascript">$(document).ready(function () {$("a[rel='bigPic']").colorbox();});
</script>
html界面:
<label><a href="../../Content/ohoopee2.jpg" mce_href="Content/ohoopee2.jpg" rel="bigPic">(点击放大)</a></label>