仿百度排列圖片預覽外掛-Simple Lightbox
阿新 • • 發佈：2018-12-11
很久以前遇到過這樣的一個面試題，要求手寫程式碼，實現百度圖片的排列預覽，並且可以左右點選檢視下一張照片，當時沒有做出來，這個問題也就一直放在了腦後，工作之後，遇到這樣的需求之後，第一反應想到的是在原始碼網站裡面找一個外掛，方便省事，不在像從前那般手敲程式碼，一敲就是一整天的感覺。
正好前幾天在群裡解答一個人的問題，遇到了類似的外掛，於是稍微總結了一下，對比了6款 jQuery Lightbox圖片檢視觸控外掛，實現不同的需求，下一篇文章推薦一下，這篇重點總結了Simple Lightbox – jQuery Lightbox外掛。
效果圖如下，多張圖片錯落有致的排列，點選每一張圖片都會按照固定的長度和寬度預覽展示。
Simple Lightbox 是一款基於 jQuery 的 Lightbox 外掛，它具有以下特點：
響應式設計
觸控/觸控友好
提供多項配置
影象預載入
支援 iOS / Android / Windows phone
使用 CSS3 過度效果，並回退相容舊瀏覽器
支援 jQuery 1.x 和 2.x 版本
支援鍵盤控制
使用方法
1、引入檔案
<link rel="stylesheet" href="css/simplelightbox.min.css"> <script src="js/jquery.min.js"></script> <script src="js/simple-lightbox.min.js"></script>
2、HTML
<div class="dowebok"> <a href="images/image1.jpg"> <img src="images/thumbs/thumb1.jpg" alt="" title="第一張圖片描述"> </a> <a href="images/image2.jpg"> <img src="images/thumbs/thumb2.jpg" alt="" title="第二張圖片描述"> </a> <a href="images/image3.jpg"> <img src="images/thumbs/thumb3.jpg" alt="" title="第三張圖片描述"> </a> ... </div>
3、JavaScript
$(function(){
$('.dowebok a').simpleLightbox();
});
完整程式碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>jQuery Lightbox外掛Simple Lightbox演示-預設效果_dowebok</title>
<link rel="stylesheet" href="css/simplelightbox.min.css">
<style>
.dowebok { width: 790px; margin: 0 auto; font-size: 0;}
.dowebok a { display: inline-block; width: 150px; margin: 5px;}
.dowebok .big { width: 300px;}
.dowebok img { width: 100%;}
</style>
</head>
<body>
<h1>預設效果</h1>
<div class="dowebok">
<a href="images/image1.jpg" class="big"><img src="images/thumbs/thumb1.jpg" alt="" title="第一張圖片描述"></a>
<a href="images/image2.jpg"><img src="images/thumbs/thumb2.jpg" alt="" title="第二張圖片描述"></a>
<a href="images/image3.jpg"><img src="images/thumbs/thumb3.jpg" alt="" title="第三張圖片描述"></a>
<a href="images/image4.jpg"><img src="images/thumbs/thumb4.jpg" alt="" title="第四張圖片描述"></a>
<a href="images/image5.jpg"><img src="images/thumbs/thumb5.jpg" alt="" title="第五張圖片描述"></a>
<a href="images/image6.jpg"><img src="images/thumbs/thumb6.jpg" alt="" title="第六張圖片描述"></a>
<a href="images/image7.jpg" class="big"><img src="images/thumbs/thumb7.jpg" alt="" title="第七張圖片描述"></a>
<a href="images/image8.jpg"><img src="images/thumbs/thumb8.jpg" alt="" title="第八張圖片描述"></a>
<a href="images/image9.jpg" class="big"><img src="images/thumbs/thumb9.jpg" alt="" title="第九張圖片描述"></a>
<a href="images/image10.jpg"><img src="images/thumbs/thumb10.jpg" alt="" title="第十張圖片描述"></a>
<a href="images/image11.jpg"><img src="images/thumbs/thumb11.jpg" alt="" title="第十一張圖片描述"></a>
<a href="images/image12.jpg"><img src="images/thumbs/thumb12.jpg" alt="" title="第十二張圖片描述"></a>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/simple-lightbox.min.js"></script>
<script>
$(function(){
$('.dowebok a').simpleLightbox();
//微信:wwwangting888 不懂來問我吧
});
</script>
原文作者：祈澈姑娘 原文連結：https://www.jianshu.com/u/05f416aefbe1創作不易，轉載請告知 90後前端妹子，愛程式設計，愛運營，愛折騰。堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。