iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 30
0
Modern Web

30天學習30套前端技術(2018年)系列 第 30

[十分鐘學習] lightgallery.js - 燈箱

example1

一套彈性高、模組化且響應式的燈箱jQuery套件

GitHub Star: 3,000
Javascripting Overall: 72%
瀏覽器: ChromeFirefoxIE9+
RWD: 支援
License: GNU General Public License v3.0


《安裝》

  • CDN

      <!-- jQuery v1.9.1 -->
      <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
      <!-- lightgallery.js v1.6.6 -->
      <link href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.6/css/lightgallery.min.css" rel="stylesheet" />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.6/js/lightgallery.min.js"></script>
    
  • npm

      $ npm install lightgallery lg-thumbnail lg-autoplay lg-video lg-fullscreen lg-pager lg-zoom lg-hash lg-share
    
  • Bower

      $ bower install lightgallery --save
    

《範例》

  • 相本效果

      <div id="example">
      	<a href="https://dummyimage.com/800x600/fff.png"> <!-- 原始圖 -->
      		<img src="https://dummyimage.com/320x240/fff.png"> <!-- 預覽圖 -->
      	</a>
      </div>
      <script>
      	$( "#example" ).lightGallery({
      		// 參數設定[註1]
      	}); 
      </script>
    

    [註1]

    參數 預設值 描述

    mode|lg-slide|過場動畫(列表[註2])
    cssEasing|ease|CSS的過場動畫速度曲線
    easing|linear|jQuery的過場動畫速度曲線
    speed|600|切換下一張照片的過場動畫時間(單位:毫秒)
    height|100%|相本高度
    width|100%|相本寬度
    addClass| |為相本添加自訂類別
    startClass|lg-start-zoom|相本初始化的動畫類別
    backdropDuration|150|過場時間(單位:毫秒)
    hideBarsDelay|6000|多久後隱藏相本工具列(單位:毫秒)
    useLeft|false|強制靠左
    closable|true|點選外部關閉相本
    loop|true|相本切換無限循環
    escKey|true|按ESC關閉相本
    keyPress|true|啟動鍵盤快捷鍵
    controls|true|顯示控制列(上/下一頁按鈕)
    slideEndAnimatoin|true|啟用關閉相本的動畫
    hideControlOnEnd|false|當在第一頁跟最後一頁時,隱藏控制列(上/下一頁按鈕)
    mousewheel|true|滑鼠滾輪可切換上/下一頁
    getCaptionFromTitleOrAlt:|true|從alt屬性中取得標題
    appendSubHtmlTo|.lg-sub-html|指定子HTML新增的地方
    preload|1|預先載入照片或影片數量,如果設定1,當你點選相本的第4張圖的時候,第3張跟第5張都會被預先載入
    nextHtml| |自訂義下一頁按鈕的HTML
    prevHtml| |自訂義上一頁按鈕的HTML
    index|0|顯示開啟相本的第一張照片或影片
    iframeMaxWidth|100%|iframe的最大寬度
    download|true|顯示下載按鈕
    counter|true|顯示計數器(照片/影片總數量以及當前編號)
    appendCounterTo|.lg-toolbar|放置計數器的類別
    enableDrag|true|啟用桌上型電腦滑鼠拖曳
    enableSwipe|true|啟用滑鼠

    [註2]

    • lg-slide
    • lg-fade
    • lg-zoom-in
    • lg-zoom-in-big
    • lg-zoom-out
    • lg-zoom-out-big
    • lg-zoom-out-in
    • lg-zoom-in-out
    • lg-soft-zoom
    • lg-scale-up
    • lg-slide-circular
    • lg-slide-circular-vertical
    • lg-slide-vertical
    • lg-slide-vertical-growth
    • lg-slide-skew-only
    • lg-slide-skew-only-rev
    • lg-slide-skew-only-y
    • lg-slide-skew-only-y-rev
    • lg-slide-skew
    • lg-slide-skew-rev
    • lg-slide-skew-cross
    • lg-slide-skew-cross-rev
    • lg-slide-skew-ver
    • lg-slide-skew-ver-rev
    • lg-slide-skew-ver-cross
    • lg-slide-skew-ver-cross-rev
    • lg-lollipop
    • lg-lollipop-rev
    • lg-rotate
    • lg-rotate-rev
    • lg-tube

《延伸》

  1. lightgallery.js
  2. sachinchoolur/lightGallery: A customizable, modular, responsive, lightbox gallery plugin.

上一篇
[十分鐘學習] Algolia Places - 強化地址輸入欄位
下一篇
[十分鐘學習] Tabslet - 頁籤
系列文
30天學習30套前端技術(2018年)61
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言