学做网站培训课程介绍

当前位置:

Jquery图片弹出相册展示插件lightbox plus

我们在上网时,经常会看到一些图片网站有相册功能,点击一个小图片,就可以浏览大图片,并且可以不断的翻页查看其它的图片。如下图:

Jquery图片弹出相册展示插件lightbox plus

怎么在自己做网站时,也可以做到这样的图片相册展示效果呢?这就需要借助Jquery图片相册展示插件lightbox plus

lightbox plus下载

Jquery图片弹出相册展示插件lightbox plus下载链接: https://pan.baidu.com/s/1kb99g35M8Nv5ZBxAmeQh6Q 密码: wwv2

lightbox plus安装方法

第一步:在自己网站页面的头部head中嵌入如下如下代码链接必须的JavaScript文件。


<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

前面一个JavaScript文件表示JavaScript库,后面一个是lightbox插件。这里的链接路径根据自己网站的实际情况进行修改。

第二步:外调 Lightbox CSS 文件 (或添加 Lightbox 样式到你现行的样式表中)。


<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

检查 CSS 并确定调用的 prev.gif 和 next.gif 文件在正确的位置。同样要确定调用的 loading.gif 和 close.gif 文件及 lightbox.js 文件在正确的位置。

lightbox plus使用方法

第一步:添加 rel="lightbox" 属性到任意一个链接标签去激活lightbox。 例如:


<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

可选择项: 使用 title 属性加上说明。

第二步:如果你有一套你想分组的相关图片, 接着上一部并且又在 rel 属性中添加一个带方括号的组名. 例如:


<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 图片轮播特效在网站制作过程中经常会用到,它可以让一个“静止”的网站“动”起来。在学做网站论坛以前的建站教程中,也讲过如何制作网站幻灯片,我们在学
  • 在自己建网站过程中,由于版面限制,很多内容需要制作成一TAB选项卡,这样在同样一个尺寸的版块,可以显示成倍的内容。TAB选项卡在很多在的大量网站中
  • 在做网站过程中,如果想在一张网页上实现图片加文字的格式,就需要通过Dreamweaver CS6破解版软件设置背景图片。可以在网页上添加背景图片,然后
  • 各位同学大家好,我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间,对我的辅导帮助。现在在这里我想给同学做分享一
  • 相信大家都有这样的经历,当我们在打开某一个网站的时候,在电脑屏幕的右下角会弹出来一个小广告窗口。如下图:这个是如何制作出来的呢?在我们
  • Ajax BootModal Login 是一个用Bootstrap的modal效果做的弹出式ajax前端注册登录插件,使用该插件,我们可以最简单的在前台添加一个ajax注册登陆按钮
  • 我们在制作一些图片网站,由于图片比较多的情况,可以使用先让用户看到一些图片的缩略图,然后通过光标移动到小图后,显示大图的效果,就叫做图片相册
  • 我们在上网时,经常会看到一些图片网站有相册功能,点击一个小图片,就可以浏览大图片,并且可以不断的翻页查看其它的图片。如下图:怎么在自
  • 感谢VIP学员西宁伍婷无私分享,此模板已通过自己做网站论坛网的审核,大家可放心使用。展示一个桶装水送水公司网站,这也是我第二次提交作业了,
  • 自加入学做网站 论坛VIP学员至今,已有几个月的时间了,一直忙于工作,没什么时间去认真的学习,自从看到论坛中设了这个学员网站模板展示板快,那么多
  • 插件介绍在网站中插入幻灯片可以让网站更加绚丽,例如学做网站论坛首页顶部左侧就是一个幻灯片,这种方式是直接借助js文件,然后嵌入到网站主题中的.
  • 本节课所使用的插件下载地址:https://pan.baidu.com/s/1ZZRYToVc_lbfbCEesbAKFwwordpress程序建网站的强大之处在于它有成千上成万的程序插件,每一