第一步:首先去JQuery下载最新的JQuery库文件和插件
http://www.jacklmoore.com/colorbox
第二布:下载解压文件后找到colorbox\colorbox下边的jquery.colorbox-min.js文件,然后再调用到需要的页面头部引入。
<script src="../../js/jquery-1.7.2.min.js"></script>
<script src="../../js/jquery.colorbox.js"></script>
引用使用的时候,代码格式如下:
<script>
$(document).ready(function(){
$("a.group3").colorbox({transition:'fade', speed:500,maxWidth:'80%'});
});
</script>
jquery.colorbox-min.js文件为压缩后的库文件jquery.colorbox-min.js实际属于JQuery库下边的一个效果插件,不同的效果有不同的效果插件分别引入,前提是已经引入最新的JQuery库文件,详情见第一步。
第三步:引入colorbox插件的css文件。位置就在你下载的colorbox文件夹下边每个效果的文件夹内。文件名为colorbox.css
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.11.2.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<script src="js/jquery.colorbox-min.js"></script>
<script>
$(document).ready(function(){
$("a.group3").colorbox({transition:'fade', speed:500,maxWidth:'80%'});
});
</script>
最后的格式写在</body>的上一行。
maxWidth:'80%' //为最大宽度
打开单个example文件夹拷贝colorbox.css到使用的页面引入!
其中每一个example就是一种显示效果!
第四步:在页面的部分加入页面调用JS代码
<script>
上段JS代码内每一个变量都是一种实现效果!
比如:$(".group4").colorbox({rel:'group4', slideshow:true});
里面的".group4",就是一种显示效果。
具体引用效果办法!
其中给需要弹出的图片或其他的a标签添加上class类。不同的效果不同的类名!group1、group2、group3,group4...
<p><aclass="cpModal"href="marylou.jpg">单张图片</a></p>
<p><aclass="cpModal"href="biuuu1.jpg">图片组1</a></p>
<p><aclass="cpModal"href="biuuu2.jpg">图片组2</a></p>
<p><aclass="cpModal"href="biuuu3.jpg">图片组3</a></p>
重点要把a标签的href地址设置成你图片的地址!然后点击才能找到图片源地址和原图片!
(然后可以在a标签里面在插入,一个img图片,用css给img标签设置一个缩略图大小!.img{width:200px;height:160px;},这么做就能实现缩略图,然后点击缩略图动态弹出原图或者设定大小的图片。)