ekko-lightbox.js是一款基於Bootstrap 3/4 的 jQuery lightBox 圖片畫廊插件。該 lightBox 插件基於 Bootstrap 的模態窗口插件來製作，可以顯示圖片，HTML 內容，視頻等，也可以遠程加載內容。
使用方法
cdn: https://cdnjs.com/libraries/ekko-lightbox
1 2 3 | <link type="text/css" rel="stylesheet" href="css/ekko-lightbox.css" /> <script src="js/jquery.min.js"></script> <script src="js/ekko-lightbox.js"></script> |
1 2 3 | <a href="img/1.jpg" data-toggle="lightbox" data-title="A random title" data-footer="A custom footer text"> <img src="img/1.jpg" class="img-responsive"> </a> |
可以像上面那樣直接在HTML中使用data-*屬性來初始化lightbox插件。也可以通過JS的方式來初始化。
1 2 | <a href="someurl" id="mylink">Open lightbox</a> $('#mylink').ekkoLightbox(options); |
1 2 3 4 | $(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) { event.preventDefault(); $(this).ekkoLightbox(); }); |
配置參數
對象的方式傳入下面的參數，或者通過 $.fn.ekkoLightbox.defaults 來設置默認參數。
| 參數 | 類型 | 默認值 | 描述 | data-* |
| remote | string | 遠程加載內容 | data-remote="http://www...." | |
| gallery | string | 畫廊組元素 | data-gallery="galleryname" | |
| gallery_parent_selector | string | document.body | 如果你單個頁面有多個圖片畫廊，該參數會在匹配的選擇器中限制圖片畫廊中的項 | data-parent="any valid selector" |
| left_arrow_class | string | .glyphicon .glyphicon-chevron-left | 左箭頭的CSS class類 | |
| right_arrow_class | string | .glyphicon .glyphicon-chevron-right | 右箭頭的CSS class類 | |
| type | string | 強制lightbox為圖片/YouTube模式 | data-type="(image|youtube|vimeo)" | |
| width (videos only; height is calculated by ratio) | integer | 強制寬度 | data-width="[0-9]+" | |
| always_show_close | boolean | true | 是否總是顯示關閉按鈕 | |
| onNavigate | callable | false | 當向左或向右導航時觸發，第一個參數為方向 | |
| loadingMessage | string | Loading... | loading的文字信息 | |
| no_related | boolean | false | 在當前視頻播放完成後不顯示相關視頻 | data-norelated |
事件
| 事件 | 描述 |
| onContentLoaded | 在內容 (image/video/remote page etc)被完全加載後觸發 |
| onNavigate | 在畫廊中導航前觸發 |
| onShow/onShown/onHide/onHidden | 繼承自bootstrap modal |
資料來源
ekko-lightbox:github、api 與使用說明
ekko-lightbox | 基於Bootstrap3的lightBox圖片畫廊插件