lightbox用法

-Advertisement-

示例代碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>lightbox</title> <link href="css/lightbox.css" rel="stylesheet"> <script t ...

示例代碼:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>lightbox</title>
    <link href="css/lightbox.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>

<body>
    <section>
        <h3>Two Individual Images</h3>
        <div>
            <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-1.jpg" data-lightbox="example-1"><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-1.jpg" alt="image-1" /></a>
            <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-2.jpg" data-lightbox="example-2" data-title="Optional caption."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-2.jpg" alt="image-1" /></a>
        </div>
        <hr />
        <h3>A Four Image Set</h3>
        <div>
            <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt="" /></a>
            <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="" /></a>
            <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="" /></a>
            <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-6.jpg" alt="" /></a>
        </div>
    </section>
    <section>
        <p>
            For more information, visit <a href="http://lokeshdhakar.com/projects/lightbox2/">http://lokeshdhakar.com/projects/lightbox2/</a>
        </p>
    </section>
    <script src="js/lightbox.js"></script>
</body>

</html>

View Code

官網

https://lokeshdhakar.com/projects/lightbox2/

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

正則表達式入門-程式員必備

學習一門語言我們需要熟悉他的語法辭彙還有常用表達，同樣這種學習方法適用於學習任何一門技術，正則的入門很簡單例如我們想讓用戶輸入的數據只能是數字那麼我們可以用"^[0-9]*$"來實現對輸入數據的監控當然具體功能還涉及更多的知識層面，本文僅介紹正則表達式的入門哦😉 什麼是正則表達式？我們來百度一下 ...
中英文切換

//首頁var zh_index = { "index1":"首頁", "index2":"產品實例" };var en_index = { "index1":"index", "index2":"Product examples" }; //服務支持var zh_serviceSupport = ...
HTML 練習實現滑鼠移到用戶圖像展示更多信息

``` Title Hello Python 我的信息註銷 klvchenklvchenklvchen klvchenklvc... ...
HTML 練習實現遮罩層

``` Title 1000 ``` ...
ES6學習（二）：函數的擴展

chapter07 函數的擴展 7.1 函數預設值 7.1.1 參數預設值簡介傳統做法的弊端（||）：如果傳入的參數相等於（==）false的話，仍會被設為預設值，需要多加入一個if判斷，比較麻煩。參數變數是預設聲明的，不可在函數體內部重覆聲明。參數的預設值會在每次調用的時候重新計算 7.1. ...
整理數組去重的幾種常用方法

最近面試有一個面試題，要求儘可能多的列舉數組去重的方法，現整理一下 1、最簡單的去重方法 2、排序後相鄰去除法該方法存在一個問題，當數組中存在number類型的2，和string類型的‘2’時,因sort方法會調用每個數組項的toString()方法，得到字元串，然後再對得到的字元串進行排序。如對 ...
(JS,JAVA,MySql)去除小數後多餘的0

分別通過JS，JAVA和MySql實現 1. JS方法 2. JAVA方法 3. MySql方法 ...
如何方便的結果ajax使用html5的新type類型

今天需要做手機端的輸入表單自動生成器，突然就想到了手機端對input的輸入類型支持還不錯，於是翻遍了資料，有了下麵的使用方法，閑話少說，上正文： html5現在可以用的新input type類型一共有下麵類型 => <input type="email" /> <input type="url" / ...