jquery colorbox图片弹出效果制作

第一步：首先去JQuery下载最新的JQuery库文件和插件

http://jquery.com/ 库文件

http://www.jacklmoore.com/colorbox  ColorBox - a jQuery lightbox彩盒插件库

第二布：下载解压文件后找到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%' //为最大宽度

注意事项！

如果文件全部引用成功不出动态效果，多半是js文件上下位置不对，页面加载的js代码没有放到引用代码的下边！！！

如果出来动画效果但是没有边框图片和加载动画之类的应该是引用的CSS文件里面有图片地址错误了，css文件的图片引用没有用../这个！需要全部替换一下css文件里面引用的图片地址就会正常加载图片了。

打开单个example文件夹拷贝colorbox.css到使用的页面引入！

其中每一个example就是一种显示效果！


第四步：在页面的部分加入页面调用JS代码

<script>

   $(document).ready(function(){

    //Examplesof how to assign the ColorBox event to elements

    $(".group1").colorbox({rel:'group1'});

    $(".group2").colorbox({rel:'group2',transition:"fade"});

    $(".group3").colorbox({rel:'group3',transition:"none", width:"75%", height:"75%"});

    $(".group4").colorbox({rel:'group4',slideshow:true});

    $(".ajax").colorbox();

    $(".youtube").colorbox({iframe:true,innerWidth:425, innerHeight:344});

    $(".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'); }

    });

    

    //Exampleof preserving a JavaScript event for inline calls.

    $(".lianghe").click(function(){

     $('.lianghe').css({"background-color":"#f00","color":"#fff", "cursor":"inherit"}).text("Open this window againand this message will still be here.");

     returnfalse;

    });

   });

  </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;},这么做就能实现缩略图，然后点击缩略图动态弹出原图或者设定大小的图片。）