当前位置: 首页 > news >正文

lightbox灯箱效果

Lightbox插件可以轻松的实现浏览图片相册的友好用户体验!

1、下载地址:http://www.lokeshdhakar.com/projects/lightbox2/

2、如何使用:

2.1、引入插件

<script type="text/javascript" src="js/lightbox/lightbox.min.js"></script>

2.2、引入css样式

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

使用情景一(单张浏览):

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

使用情景二(图片集浏览):

<a href="img/image-1.jpg" data-lightbox="group2" data-title="图片一">图片一</a>
<a href="img/image-2.jpg" data-lightbox="group2" data-title="图片二">图片二</a>
<a href="img/image-3.jpg" data-lightbox="group2" data-title="图片三">图片三</a>
<a href="img/image-4.jpg" data-lightbox="group2" data-title="图片四">图片四</a>

局部修改,增加用户体验:

将:return"Image "+a+" of "+b
修改为:return a+"/"+b

最后附上两效果图吧:

转载于:https://www.cnblogs.com/xlj-code/p/6053130.html

相关文章:

  • VB数据类型概述
  • 苹果支付系统——Apple Pay In-App Purchase
  • Notepad++ install vi plugin
  • 论蒙牛能在网上卖牛奶,是否可行?
  • ruby学习笔记
  • 行业内幕:服务器低价租用的真实面目
  • [Intel Edison开发板] 05、Edison开发基于MRAA实现IO控制,特别是UART通信
  • 智能实验室-全能优化(Guardio) 5.03.0.1011
  • 送给自己
  • mysql中查询语句中的一个知识点说明
  • 《网管员必读》系列第二版大集合了
  • MyBatis源码解读(4)——SqlSession(上)
  • 对最近一段时间的总结
  • [工具]ps
  • 快速查询数据库中有数据的表
  • 2019.2.20 c++ 知识梳理
  • django开发-定时任务的使用
  • Git学习与使用心得(1)—— 初始化
  • javascript从右向左截取指定位数字符的3种方法
  • Javascript基础之Array数组API
  • JS创建对象模式及其对象原型链探究(一):Object模式
  • Promise面试题,控制异步流程
  • Quartz实现数据同步 | 从0开始构建SpringCloud微服务(3)
  • V4L2视频输入框架概述
  • 构造函数(constructor)与原型链(prototype)关系
  • 关于 Linux 进程的 UID、EUID、GID 和 EGID
  • 解决jsp引用其他项目时出现的 cannot be resolved to a type错误
  • 漫谈开发设计中的一些“原则”及“设计哲学”
  • 前端攻城师
  • 新版博客前端前瞻
  • 一道面试题引发的“血案”
  • - 语言经验 - 《c++的高性能内存管理库tcmalloc和jemalloc》
  • 关于Android全面屏虚拟导航栏的适配总结
  • ​​​​​​​sokit v1.3抓手机应用socket数据包: Socket是传输控制层协议,WebSocket是应用层协议。
  • #FPGA(基础知识)
  • #基础#使用Jupyter进行Notebook的转换 .ipynb文件导出为.md文件
  • (pojstep1.1.2)2654(直叙式模拟)
  • (二)pulsar安装在独立的docker中,python测试
  • (附源码)spring boot儿童教育管理系统 毕业设计 281442
  • (附源码)spring boot建达集团公司平台 毕业设计 141538
  • (附源码)计算机毕业设计SSM疫情居家隔离服务系统
  • (力扣题库)跳跃游戏II(c++)
  • (南京观海微电子)——I3C协议介绍
  • (转)visual stdio 书签功能介绍
  • (转载)Google Chrome调试JS
  • .MyFile@waifu.club.wis.mkp勒索病毒数据怎么处理|数据解密恢复
  • .Net Core/.Net6/.Net8 ,启动配置/Program.cs 配置
  • .net 调用php,php 调用.net com组件 --
  • .NET设计模式(2):单件模式(Singleton Pattern)
  • @ 代码随想录算法训练营第8周(C语言)|Day53(动态规划)
  • @Async注解的坑,小心
  • @EventListener注解使用说明
  • [ C++ ] STL---string类的模拟实现
  • [20160902]rm -rf的惨案.txt
  • [20190416]完善shared latch测试脚本2.txt