jquery colorbox图片弹出效果制作

本文详细介绍了如何使用jQuery和ColorBox插件创建图片弹出效果。步骤包括下载jQuery库和ColorBox插件,引入相关JS和CSS文件,配置不同效果的JS代码,并在HTML中指定a标签的class和href属性。通过设置不同类名,可以实现单张图片、图片组等不同展示方式,同时支持幻灯片播放等功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

第一步:首先去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;},这么做就能实现缩略图,然后点击缩略图动态弹出原图或者设定大小的图片。)

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值