建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

Lightbox2简单强大的jQuery灯箱画廊插件

来源:易助科技网浏览量:50收藏

简介


Lightbox2是一个简单而有用的脚本,可以用来将您的图像或照片覆盖在当前网页的顶部。它还可以用作图像库或幻灯片,用户可以在同一组中的图像之间切换。使用起来非常简单,无需编写任何JS代码。

(下载的附件中附有DEMO)


更多灯箱画廊插件:👉  [ 详情 ]


Lightbox2简单强大的JS灯箱画廊插件-效果图


浏览器支持情况


Lightbox2 已在以下浏览器中成功测试:


IE :lightbox-plus-jquery.js 文件包含jquery v2.x并支持IE 9+。如果您想支持IE 6、7和8,请使用您自己的带有lightbox.js的jQuery v1.x副本。

Chrome

Safari

Firefox

iOS Safari

iOS Chrome

Android Browser

Android Chrome



使用


1.  引入


npm


npm install lightbox2 --save


html中引入


<link href="path/to/lightbox.css" rel="stylesheet" />

<script src="path/to/lightbox.js"></script>


如果您已经在页面上使用jQuery,请确先加载 jQuery 1.7 或更高版本,并且由于使用了效果模块,因此不支持jQuery slim构建。如果您当前没有使用jQuery,请使用 lightbox-plus-jquery.js,而不是 lightbox.js



2. 基本用法


1)单张图片


将 data-lightbox 属性添加到任何图像链接以启用灯箱。对于属性的值,请为每个图像使用唯一的名称。例如:


<a href="img/image-1.jpg" data-lightbox="image-1" data-title="我的图片">图片1</a>


配置项


如果要显示标题,请添加 data-title 属性。

如果要设置链接图像的alt属性,请添加 data-alt 属性。



2)图片集


如果有一组相关图像要组合成一组,请对所有图像使用相同的 data-lightbox 属性值。例如:


<a href="img/image-2.jpg" data-lightbox="roadtrip">图片2</a>
<a href="img/image-3.jpg" data-lightbox="roadtrip">图片3</a>
<a href="img/image-4.jpg" data-lightbox="roadtrip">图片4</a>



3. 配置


如果要更改任何默认选项,请调用 option 方法。


<script>
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true
    })
</script>


配置说明


配置项默认值说明
alwaysShowNavOnTouchDevicesfalse如果为true,则在支持触摸的设备上,查看图像集时鼠标悬停时出现的左右导航箭头将始终可见。
albumLabel"Image %1 of %2"查看图像集时显示在标题下方的文本。默认文本显示当前图像编号和图像集中的图像总数。
disableScrollingfalse如果为true,请在Lightbox打开时阻止页面滚动。这是通过隐藏在主体上的设置溢出来实现的。
fadeDuration600Lightbox容器和覆盖淡入和淡出所需的时间(以毫秒为单位)。
fitImagesInViewporttrue如果为true,请调整将延伸到视口外部的图像的大小,使其整齐地放在视口内部。这可以避免用户滚动查看整个图像。
imageFadeDuration600加载后图像淡入所需的时间(以毫秒为单位)。
maxWidth 如果设置,图像宽度将限制为此数字(以像素为单位)。纵横比将不会保持。
maxHeight 如果设置,图像高度将限制为此数字(以像素为单位)。纵横比将不会保持。
positionFromTop50Lightbox容器将显示的与视口顶部的距离(以像素为单位)。
resizeDuration700在不同大小的图像之间转换时,Lightbox容器设置其宽度和高度动画所需的时间(以毫秒为单位)。
showImageNumberLabeltrue如果为false,则表示当前图像编号和集合中图像总数的文本(例如“图像2/4”)将被隐藏。
wrapAroundfalse如果为true,当用户到达集合中的最后一张图像时,将出现右导航箭头,用户将继续向前移动,这将使用户返回到集合中的第一张图像。



相关链接


官网地址 :  https://lokeshdhakar.com/projects/lightbox2/

GitHub 地址 :  https://github.com/lokesh/lightbox2

易助科技网演示地址 : http://demo.easyzone.net.cn/plugin/lightbox2/examples/index.html