CFXIXI工作室首页
CF西西的博客 | 关于ColorBox使用的一个简单例子

关于ColorBox使用的一个简单例子

3. 三月 2012

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>

JQuery