jquery colorbox图片弹出效果制作
第一步:首先去JQuery下载最新的JQuery库文件和插件
http://jquery.com/
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;},这么做就能实现缩略图,然后点击缩略图动态弹出原图或者设定大小的图片。)
jquery colorbox图片弹出效果制作相关推荐
- html5仿qq空间,JS实现的仿QQ空间图片弹出效果代码
本文实例讲述了JS实现的仿QQ空间图片弹出效果代码.分享给大家供大家参考,具体如下: function imageShow(which_click) { var image_path = which_ ...
- jQuery点击图片弹出大图遮罩层
使用jQuery插件HoverTreeShow弹出遮罩层显示大图 效果体验: http://hovertree.com/texiao/hovertreeshow/ 在 开发HoverTreeTop项目 ...
- 基于jQuery向下弹出遮罩图片相册
今天给大家分享一款基于jQuery向下弹出遮罩图片相册.单击相册图片时,一个遮罩层从上到下动画出现.然后弹出显示图片.这款插件适用浏览器:IE8.360.FireFox.Chrome.Safari.O ...
- php jquery ajax登录,jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
弹出层主要用于展示丰富的页面信息,还有一个更好的应用是弹出表单层丰富交互应用.常见的应用有弹出登录表单层,用户提交登录信息,后台验证登录成功后,弹出层消失,主页面局部刷新用户信息.本文我们将给大家介绍 ...
- html5鼠标点击弹出层,jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
本文实例讲述了jQuery实现单击弹出Div层窗口效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现 ...
- html5图片平铺的代码,jQuery图片平铺效果制作网页背景图片平铺代码
插件描述:jQuery图片平铺效果制作网页背景图片平铺代码 调用JS文件 调用插件方法 $(function(){ // 插件初始化 $('img').jqthumb({ classname : 'j ...
- html网页背景图片平铺代码,jQuery图片平铺效果制作网页背景图片平铺代码
插件描述:jQuery图片平铺效果制作网页背景图片平铺代码 调用JS文件 调用插件方法 $(function(){ // 插件初始化 $('img').jqthumb({ classname : 'j ...
- android 气球菜单,jQuery实现气球弹出框式的侧边导航菜单效果
本文实例讲述了jQuery实现气球弹出框式的侧边导航菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的气球弹出框式的侧边导航菜单,预览效果时左下角会提示错误,而且看不到效果,刷 ...
- Axure知识点:如何制作弹出效果的搜索框(以泉州师范学院官网为例)
摘要:微信搜索[三桥君] 使用软件:Axure RP 9软件 说明:实现方式不唯一,这里给出三桥君制作的一种方式. 一.问题 三桥君在制作泉州师范学院官网带有弹出效果的搜索框时,属实让我犯难了.[泉州 ...
- 微信小程序第五篇:页面弹出效果及共享元素动画
系列文章传送门: 微信小程序第一篇:自定义组件详解 微信小程序第二篇:七种主流通信方法详解 微信小程序第三篇:获取页面节点信息 微信小程序第四篇:生成图片并保存到手机相册 目录 一.page-caon ...
最新文章
- rocketmq新扩容的broker没有tps_RocketMQ吐血总结
- mysql timeout知多少
- 什么是分布式事务以及有哪些解决方案?
- angular学习笔记(十九)-自定义指令修改dom
- boost::hana::Comparable用法的测试程序
- ES中的RollUp概念
- 2mysql_2.Mysql常用命令行大全
- 用python + openpyxl处理excel(07+)文档 + 一些中文处理的技巧
- 史上最全近百条Oracle DBA日常维护SQL脚本指令
- 95后人才吸引力城市排名发布,深圳位居全国第二
- java 求向量的均值,标准数组——向量
- 地址管理和子网划分基础
- 精华阅读第7期|程序员职业人生规划的三点建议
- 深度学习2.0-普通BP神经网络
- HCIE Secuirty 防火墙内容安全组合 备考笔记(幕布)
- Javascript特效:导航栏楼层效果
- virtualxposed使用教程_VirtualXposed框架
- linux的ls -l显示的total 4是什么意思?我使用ls -a -l显示的total12,同一个文件夹显示了不同的信息?
- HTK安装实录(Ubuntu18.04)
- 高性能Web应用程序–数据URI