仿百度排列圖片預覽插件-Simple Lightbox

時間 2019-12-07

標籤百度排列圖片預覽插件 simple lightbox 简体版

原文原文鏈接

好久之前遇到過這樣的一個面試題，要求手寫代碼，實現百度圖片的排列預覽，而且能夠左右點擊查看下一張照片，當時沒有作出來，這個問題也就一直放在了腦後，工做以後，遇到這樣的需求以後，第一反應想到的是在源碼網站裏面找一個插件，方便省事，不在像從前那般手敲代碼，一敲就是一成天的感受。css

正好前幾天在羣裏解答一我的的問題，遇到了相似的插件，因而稍微總結了一下，對比了6款 jQuery Lightbox圖片查看觸控插件，實現不一樣的需求，下一篇文章推薦一下，這篇重點總結了Simple Lightbox – jQuery Lightbox插件。html

效果圖以下，多張圖片錯落有致的排列，點擊每一張圖片都會按照固定的長度和寬度預覽展現。前端

下載插件地址：http://www.dowebok.com/186.html
官方主頁：http://andreknieriem.de/simple-lightbox/
GitHub 地址：https://github.com/andreknieriem/simplelightboxjquery

Simple Lightbox 是一款基於 jQuery 的 Lightbox 插件，它具備如下特色：git

響應式設計
觸控/觸摸友好
提供多項配置
圖像預加載
支持 iOS / Android / Windows phone
使用 CSS3 過分效果，並回退兼容舊瀏覽器
支持 jQuery 1.x 和 2.x 版本
支持鍵盤控制

使用方法

一、引入文件github

<link rel="stylesheet" href="css/simplelightbox.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/simple-lightbox.min.js"></script>

二、HTMLweb

<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>

三、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>