整合 Lightbox 和 Swiper 的效果

Posted on In

要如何做到「在燈箱內輪播」的效果？

css 作法

css 都放在<head>裡面（因為樣式要先出來後，再跑javascript）

CSS 順序說明

雖然 CSS 正確來說，最好是先載入 all.css，這樣網頁基礎樣式先出來會比較好。

但是把 all.css 放最後有兩個原因：

  1. 自己更改了某些套件的樣式，為了覆蓋掉套件的程式碼，而把all.css放在最後再載入
  2. 且因為 CSS 的載入速度很快，肉眼無法辨識，所以不會有明顯的載入速度差異

javascript 作法

「jQuery核心、swiper的js、lightbox的js、自己的all.js」依序 都放在</body>前面

javascript 擺放的順序

❗️

[永遠要記住！]

jQuery 核心放最前面
Plugin 的 js 放中間自己寫的 all.js 放最後

原因為：要先跑完核心的程式碼，我自己寫的all.js才能被執行

all.js裡面是寫「document.ready」，會把結構都跑完後，再去執行裡面的程式碼

❗️ 要非常注意先後順序的問題如果把all.js放在核心js的前面，會發生什麼事情？

jQuery就會出錯（因為抓不到核心），用Console檢查會出現error

html 作法

Swiper

將圖片用img插入

img的src放小圖
a連結的href放大圖

完成了！

Q&A

Q:
在之前教nivo時，我把nivo的js檔放在lightbox的js檔前面，就衝到了(讀不到nivo的js文件)，不過位置換回來就好了。

A:
nivo 的插件會因載入順序而導致無法讀取是因為在 jQuery 新版 3.3 的部分，和 lightbox 檔案有些衝突的地方，所以才會需要先載入 lightbox，也因此我們更新改使用 swiper 哦

我的codepen練習：
https://codepen.io/saffranwang/pen/vPRYbx?editors=1010

Q:
我只放了三張圖片，但Swiper會產生前後兩個複本，使Lightbox的album陣列多了重複的兩筆資料（第1和第3張會各重複一次），導致燈箱裡面會跑五張圖片。

如下圖紅框處，「class='swiper-slide-duplicate'」為兩個多出來的複本

A:
我這邊的解法是在 swiper 生成後，再加上這段程式碼將 .swiper-slide-duplicate 裡面 a 連結的 'data-lightbox' 屬性移除

1
2
3
4
5
6
7
8
var mySwiper = new Swiper('.swiper-container', {
.....
       on: {
          init: function () {
            $('.swiper-slide-duplicate').children().removeAttr('data-lightbox');
          },
        }
    });

這樣 lightbox 的功能可以正常計算&使用

[說明]
上面這個解法，是 Swiper 官方文件裡面提供的。

on 在文件中說明是用來註冊事件處理器，而 init 是用來在 Swiper 初始化( init, initialize 的縮寫 )時執行我們所撰寫的程式碼，比如說移除多餘的動態結構。