下载插件
https://lokeshdhakar.com/projects/lightbox2/
引入css、js文件HTML、并初始化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../dist/css/lightbox.min.css">
<style>
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<a href="../dist/images/share_1.jpg" data-lightbox="roadtrip"><img src="../dist/images/share_1.jpg" alt=""></a>
<a href="../dist/images/share_2.png" data-lightbox="roadtrip"><img src="../dist/images/share_2.png" alt=""></a>
<a href="../dist/images/share_3.png" data-lightbox="roadtrip"><img src="../dist/images/share_3.png" alt=""></a>
<script src="../dist/js/jquery-3.2.1.min.js"></script>
<script src="../dist/js/lightbox.min.js"></script>
<script>
$(function() {
// 初始化：注意初始化的时机
lightbox.option({
'resizeDuration': 200,
'wrapAround': true,
'albumLabel': '%1/%2', //图片下方显示 当前页码/总页码 1/3
'disableScrolling': true, //禁止页面滚动
'maxWidth': 600,
'maxHeight': 1100,
'positionFromTop': 50, //距离顶部的距离，如果不设置出不来
'fitImagesInViewport': true,
'resizeDuration': 300
})
})
</script>
</body>
</html>
按钮图片，默认的
如果出不来添加样式
<style>
#lightbox {
position: absolute !important;
left: 0 !important;
top: 50px !important;
}
</style>