這次做一個簡單的圖片燈箱(lightbox)，

並搭配swiper套件完成滑動效果，

swiper以及其他部分都不使用jquery。

 

7/16更新。發現swiper的CDN死去了，單頁版換個CDN跟樣式微調一下。
 
文章demo code有放github，

這次做了 webpack版 跟 單頁版 (不用裝webpack)。

 

單頁版用github page可以直接查看頁面
lightBox Demo

 

這次燈箱的功能是

1. 可左右滑動切換圖片

2. RWD自適應裝置畫面

3. 燈箱封面與開啟燈箱後的第一張畫面不同

 

第三點這個是因為網路上能找到的套件都是燈箱封面與進去第一張畫面相同，之前工作時有遇到設計師希望兩者用不同的圖片，所以自己做了一個。

 

新增一個頁面lightBox.vue及相對應的css檔案。

assets資料夾中放入本次實作會用到的圖片。

 

css設定一下圖片長寬跟簡單的自適應。

然後點擊圖片開啟燈箱。

 

目前為止的code：

// lightBox.vue

<template>
  <div>
    <h3 class="title">lightBox</h3>
    <div class="lightBox">
      <figure>
        <img @click="lightBox('egg')" class="demo" src="/image/lightBox/e1.jpg" alt="">
        <p>EGG</p>
      </figure>
      <figure>
        <img @click="lightBox('black')" class="demo" src="/image/lightBox/b1.jpg" alt="">
        <p>BLACK</p>
      </figure>
      <figure>
        <img @click="lightBox('orange')" class="demo" src="/image/lightBox/o1.jpg" alt="">
        <p>Orange</p>
      </figure>
    </div>
  </div>
</template>

 

<script>
export default {
  data: function() {
    return {
      list: {
        egg: ['e2.jpg', 'e3.jpg', 'e4.jpg'],
        black: ['b2.jpg', 'b3.jpg', 'b4.jpg'],
        orange: ['o2.jpg', 'o3.jpg', 'o4.jpg'],
      },
      mask: false,
      showList: []
    }
  },
  methods: {
    lightBox(showCat, close = false) {
      if (close) {
        this.mask = false
      } else {
        this.mask = true
        this.showList = this.list[showCat]
      }
    }
</script>

 

點擊lightBox開啟燈箱時會做個遮罩，用變數mask控制是否顯示。

燈箱裏頭，

安裝swiper套件用以做出圖片左右滑動的效果。

 

 

使用上，只要把幾個class按照順序加上之後，就可以得到最簡單的一個swiper

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" v-for="(item,index2) in showList">
      <div class="swiper-zoom-container">
        <img :src="'/image/lightBox/'+item" alt="" class="lazyload">
      </div>
    </div>
  </div>

  <!-- 照片下方swiper的點點 -->
  <div class="swiper-pagination swiper-pagination-white"></div>
  <!-- swiper套件的左右按鈕 -->
  <div class="swiper-button-prev fas fa-angle-left"></div>
  <div class="swiper-button-next fas fa-angle-right"></div>
</div>

 

swiper的js部分：

this.$nextTick(() => {
  // DOM更新了
  // swiper重新初始化
  let swiper = new Swiper('.swiper-container', {
    zoom: true,
    pagination: {
      el: '.swiper-pagination',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }
  });
})

 

功能正常之後主要都是調整樣式。

除此之外，在右上角多加一個關閉按鈕。

這個按鈕是用字型，

字型取代圖片是網站實作上常見的一種省流量的方法，

比較詳細的介紹可以參考我的這篇文章：

使用Font Awesome作為網站icon與製作字型icon

 

然後把swiper左右按鈕預設的的圖式也換掉，

可以看到上面的html部分我已經幫左右按鈕分別加上了

fas fa-angle-left / fas fa-angle-right

的class，這兩個是字型icon。

 

css的部分我是強行蓋掉原本swiper css的設定。

 

.mask .swiper-button-next:after,.mask .swiper-button-prev:after{
  font-family: 'Font Awesome 5 Free';
}

.mask .swiper-button-prev:after,
.mask .swiper-container-rtl .swiper-button-next:after {
  content: '\f104';
}

.mask .swiper-button-next:after,
.mask .swiper-container-rtl .swiper-button-prev:after {
  content: "\f105";
}

.mask .fa-angle-left:before,.mask .fa-angle-right:before{
  content: "";
}

 

content: ""這個是因為字型他是用before偽元素加上，

不過swiper本身是用after

如果沒有設定這個，會出現兩個按鍵符號。

形容都很抽象，有興趣的話直接拿掉看就知道這是在說什麼了XD

 

另外因為按按鈕時有發生預設藍框的情形，

所以這邊在index.html引入了normalize.css

關於normalize.css，詳情可以參考這篇文章：

Day21：小事之 CSS Reset 與 CSS normalize

 

不過引入後，用chrome模擬手機看還是會有藍框。

就先不管他了(誤)

 

燈箱這邊結合比較多功能，

其他檔案的部分也有做一些微調，

比如因為手機板查看的時候整個畫面都會跑掉，

所以才發現是沒有設定viewport的原因，

有在index.html多加一行

 

不過主要概念就是以上這些了。

 

另外不使用webpack的單頁版本是把需要使用的套件例如vue、swiper、fontAwesome都用cdn的方式引入。

只要下載index.html跟圖片資料夾就可以直接在本機電腦上查看。