線上書籍

Home

數位相簿很上手

一、建立專案repo

  1. 在GitHub建立Repo「gallery」
  2. 在本地端建立 \github\gallery
  3. 請依序執行(請從GitHub上複製執行) echo "# gallery" >> README.md git init git add README.md git commit -m "first commit" git remote add origin git@github.com:webugm/gallery.git git push -u origin master

     

  4. 完成後，請檢查 \github\gallery 與 GitHub 資料是否同步
  5. 設定GitHub Pages
  6. 上傳三個步驟
    git add .
    git commit -m "訊息" 
    git push origin master
     

二、建立Bootstrap4框架

  1. 下載Bootstrap至我們的專案並解壓縮：https://github.com/twbs/bootstrap/releases/download/v4.1.0/bootstrap-4.1.0-dist.zip
  2. 下載JQuery：https://code.jquery.com/jquery-3.3.1.min.js
  3. 下載Popper：https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js
  4. Bootstrap4框架 <!DOCTYPE html> <html lang="zh-Hant-TW"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <title>Bootstrap 離線版</title> </head> <body> </body> </html>

     

  5. 建立index.html、電子相簿
  6. 檢查js、css引入是否有問題
  7. Bootstrap4 中文官網：http://bootstrap.hexschool.com/

三、建立電子相簿網格

  1. 容器：container(固定)、container-fluid(滿版)
  2. 斷點：xs、sm、md、lg
  3. 列：row
  4. 欄：col
  5. 圖片：.img-thumbnail 讓圖片有1px邊框的顯示、.img-fluid 設定為響應式

四、圖片處理

  1. 高清免費圖片：https://unsplash.com/
  2. 簡易圖片編輯軟體：http://www.faststone.org/ (批次處理)
  3. 框架 <div class="container"> <h1 class="my-4 text-center text-lg-left">電子相簿</h1> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6"> <a href="#" class="d-block mb-4 h-100"> <img class="img-fluid img-thumbnail" src="...." alt=""> </a> </div> </div> </div>

     

  4.  

五、電子相簿播放

  1. 相簿套件：https://github.com/sachinchoolur/lightGallery
  2. 線上範例：http://sachinchoolur.github.io/lightGallery/
  3. 可以先下載專案，再去看demo，即可了解套件
  4. 安裝 <!-- lightgallery css --> <link rel="stylesheet" type="text/css" href="lightgallery/css/lightgallery.css"> <!-- lightgallery js --> <script src="lightgallery/js/picturefill.min.js"></script> <script src="lightgallery/js/lightgallery-all.min.js"></script> <script src="lightgallery/js/jquery.mousewheel.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#lightgallery').lightGallery(); }); </script>

     

  5. 在包裝上「id="lightgallery"」，在項目上「data-src="...." data-sub-html="....."」
  6. https://github.com/tawan158/gallery