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

http://jquery.com/?庫文件

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

第二布：下載解壓文件后找到colorbox\colorbox下邊的jquery.colorbox-min.js文件，然后再調(diào)用到需要的頁面頭部引入。

<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庫下邊的一個效果插件，不同的效果有不同的效果插件分別引入，前提是已經(jīng)引入最新的JQuery庫文件，詳情見第一步。

第三步：引入colorbox插件的css文件。位置就在你下載的colorbox文件夾下邊每個效果的文件夾內(nèi)。文件名為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%' //為最大寬度
注意事項！
如果文件全部引用成功不出動態(tài)效果，多半是js文件上下位置不對，頁面加載的js代碼沒有放到引用代碼的下邊！！！
如果出來動畫效果但是沒有邊框圖片和加載動畫之類的應(yīng)該是引用的CSS文件里面有圖片地址錯誤了，css文件的圖片引用沒有用../這個！需要全部替換一下css文件里面引用的圖片地址就會正常加載圖片了。

打開單個example文件夾拷貝colorbox.css到使用的頁面引入！


其中每一個example就是一種顯示效果！

第四步：在頁面的部分加入頁面調(diào)用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代碼內(nèi)每一個變量都是一種實現(xiàn)效果！

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

里面的".group4"，就是一種顯示效果。

具體引用效果辦法！

其中給需要彈出的圖片或其他的a標(biāo)簽添加上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標(biāo)簽的href地址設(shè)置成你圖片的地址！然后點擊才能找到圖片源地址和原圖片！

（然后可以在a標(biāo)簽里面在插入，一個img圖片，用css給img標(biāo)簽設(shè)置一個縮略圖大小！.img{width:200px;height:160px;},這么做就能實現(xiàn)縮略圖，然后點擊縮略圖動態(tài)彈出原圖或者設(shè)定大小的圖片。）

?

總結(jié)

以上是生活随笔為你收集整理的jquery colorbox图片弹出效果制作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。