使用lightbox插件实现图片预览功能
lightbox插件可以实现图片的预览功能
lightbox插件的github地址:https://github.com/lokesh/lightbox2
lightbox插件的简单使用
一:引入lightbox的js
<script src="/js/jquery.min.js"></script>
<script src="/lightbox/lightbox.js"></script>
二:引入lightbox的css
<link href="/lightbox/lightbox.css" rel="stylesheet" />
三:html实现图片预览
1:单张图片的图片预览实现
<a href="/images/a1.jpg" data-lightbox="image-1" data-title="图片1"><img src="/images/a1.jpg" alt="">
</a>
2:多张图片的图片预览实现(data-lightbox使用相同的属性值实现多图预览)
<a href="/images/a1.jpg" data-lightbox="image-1" data-title="图片1"><img src="/images/a1.jpg" alt="">
</a>
<a href="/images/a2.jpg" data-lightbox="image-1" data-title="图片2"><img src="/images/a2.jpg" alt="">
</a>
如上我们就可以使用lightbox插件实现简单的图片预览功能
使用lightbox插件实现图片预览功能相关推荐
- vue+vant使用图片预览功能ImagePreview的问题
如果您搜到这篇文章的话,那员外估计您遇到跟我一样的问题了,即在打开图片预览功能后,如果不关闭预览的图片,同时改变路由的话,会发现即使路由改变了,预览的图片还在文档的最顶层显示,如图: 着实让员外百思不 ...
- vue图片缩略图及图片预览功能
前言 上次有个需求,是要给图片做个缩略图以及预览功能.其实用vue来实现是很简单的, 几句代码可以搞定,也不需要什么额外的插件. 效果如下: vue显示图片缩略图 vue显示图片预览功能 核心代码 两 ...
- 原生js实现ajax的文件异步提交功能、图片预览功能.实例
采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...
- 【若依(ruoyi)】表格图片预览功能图片超宽、超高问题
前言 若依(ruoyi): v4.3 360极速浏览器 12.0.1550.0 (正式版本) (32 位) 操作系统 Windows 10 OS Version 2004 (Build 19041.5 ...
- html预览图片的功能,javascript实现的图片预览功能
本文实例讲述了javascript实现的图片预览功能.分享给大家供大家参考,具体如下: 1.将下面的代码复制到 内 /* Thumbnail image viewer- ?Dynamic Drive ...
- 微信小程序实现图片预览功能
小程序有提供预览图片的wx.previewImage方法 先在页面上放上图片标签 <imagecatch:tap="preview"data-src = 'https://s ...
- django admin后台列表页、修改/详情页图片预览功能
目录 一.admin后台列表页的图片预览功能 二.admin后台修改/详情页图片预览功能 1,添加html前端代码 2.在admin.py文件中添加以下代码: 1.列表页图片问题:在admin列表页中 ...
- 最简单的图片预览功能【兼容IE8】
最简单的图片预览功能[兼容IE8] 将如下代码放入<head></head>中: <html><head> <script type=&quo ...
- 带图片预览功能的图片上传
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- uniapp实现图片预览功能
点击图片实现预览功能如下: <!-- 轮播 --> <view class="ms_shops"><swiper class="ms_swi ...
最新文章
- react开发教程(十)redux结合react
- Python中JSON的基本使用
- ebay php 商品添加多运输,eBay如何设置物流方式
- C# 2.0对现有语法的改进
- Linux下两种TCP网络服务器实现方式:循环服务并发服务
- 三菱基于雷诺平台推全新跑车 搭1.1T引擎
- win2003额外域控制器升级到主域控制器
- 测试LOL帧数的软件,lol手游画质帧率修改器
- linux查询文件md5sum,Linux下通过md5sum生成MD5文件校验MD5
- BeyondCompare4完美“破解“
- Java EasyPoi简单报表+复合表头报表的导出
- 扫福活动开始,你的公众号图文排版也要“福”气满满
- iPhone 4 无shsh 完美降级 iOS 6
- 《帝友P2P网络借贷系统》项目研发阶段性总结
- Java --- JUC之CAS
- 狂神说——大前端进阶NodeJS、Npm、Es6、Babel、Webpack、模块化使用
- PHP、AJAX、二阶段第五周
- Bootstrap table设置列宽和固定表头
- HTK工具箱的安装和使用(WAV到MFCC)
- 使用Gradle编写蒲公英自动上传安装包和更新说明脚本