# 八、第三方Plugin

## 8-48 使用第三方 plugin 需要注意的細節

* 熱門瀏覽器有無支援，至少支援 IE9
* 確保該載入的 CSS、JS、IMG，都有載入
* 如果發現問題，打開 Console 除錯
* 查詢 Plugin JS 的預設設定
* 修改 CSS 成自己的樣式

## 8-49 lightbox、nivoslider

同學們好：

接下來後面章節會講解關於 lightbox、nivoslider 的圖片動畫效果，

目前這兩個套件可以兼容於 jQuery 2.x 的版本，但在支援目前最新的 3.x 版本時會有些問題，

所以會建議各位同學先下載課程範例程式碼的 jQ 核心進行練習，瞭解插件的整合脈絡學習效果會更好些哦 :D

## 8-50 Lightbox 2 - 圖片燈箱效果(上)

* [Lightbox](https://lokeshdhakar.com/projects/lightbox2/)
* [觀念說明 --- 相對路徑與絕對路徑 - 一個社區大學小講師的教課學習筆記](https://sites.google.com/site/joyhsuclub/dreamweaver/path)
* [HW8-50 Lightbox 2 - 圖片燈箱效果(上) | jQuery @HexSchool](https://codepen.io/ayugioh2003/pen/LrgOZq)

## 8-51 Lightbox 2 - 圖片燈箱效果(下)

可以自行查看 lightbox 的 css 和 js 碼，並進行修改

## 8-52 Nivo Slider - 圖片輪播效果(上)

* [Codeinwp/Nivo-Slider-jQuery: Nivo Slider - The Most Awesome jQuery Image Slider](https://github.com/Codeinwp/Nivo-Slider-jQuery)
* [Getting started with the Nivo Slider jQuery Plugin - ThemeIsle Docs](https://docs.themeisle.com/article/485-getting-started-with-the-nivo-slider-jquery-plugin)
* 不吃 jQuery3，只吃 jQuery1 的樣子
* 透過文件，可以知道能調整哪些參數來改變效果
* 像是轉場動畫、Nav bar 要不要顯示縮圖

## 8-53 Nivo Slider - 圖片輪播效果(下)

* [HW8-53 Nivo Slider - 圖片輪播效果(下) | jQuery @HexSchool](https://codepen.io/ayugioh2003/pen/vrVzWm)
* 只放程式碼上去，圖片沒放

左右滑動幻燈片效果

* 一開始 [A Pen by chasel](https://codepen.io/chasel1020/pen/xXOYRx)
* [A Pen by chasel](https://codepen.io/chasel1020/pen/NarYaQ)
* 老師推薦 [Swiper - Most Modern Mobile Touch Slider](http://idangero.us/swiper/)
* 同學找前輩寫，看不懂 pug[A Pen by Paul Tsai](https://codepen.io/iampaul83/pen/WZxadK)
* [HTML2Jade - HTML to Jade Online Realtime Converter](http://html2jade.org/)

## 8-54 slider + nivo 整合

hi 各位同學：

下個影片則會請您將兩個插件合併在一起，

但由於目前 lightbox 有用到 jQuey 3 以上新的核心，

這會導致 nivoslider 的 jQuery 支援版本不相容，

解法也很簡單，請將原本載入 nivo 這段語法從原本這樣

```javascript
   $(window).load(function() {
      $('#slider').nivoSlider();  
  });
```

改成下面這樣就可以運作嘍，再請試試看，這部分也在下部影片夾帶的範例程式碼有提供嘍。

```javascript
   $(window).on('load', function(){  
    $('#slider').nivoSlider(); 
  });
```

* [jQuery Core 3.0 Upgrade Guide | jQuery](https://jquery.com/upgrade-guide/3.0/#breaking-change-load-unload-and-error-removed)

## 8-55 將上面的效果試著整合在一個網頁中吧！

<https://thimble.mozilla.org/zh-TW/user/ayugioh2003/1779147> ​這是我在這一節的作業，請老師幫忙查看了 謝謝老師 呈現網址: [https://thimbleprojects.org/ayugioh2003/510238/​​](https://thimbleprojects.org/ayugioh2003/510238/%E2%80%8B%E2%80%8B) 檔案下載連結: [https://drive.google.com/drive/folders/1lXPntINx9vu0phwTMwtn1sU\_Cz9Ds197?usp=sharing​​](https://drive.google.com/drive/folders/1lXPntINx9vu0phwTMwtn1sU_Cz9Ds197?usp=sharing%E2%80%8B%E2%80%8B) 另外想請問一些事情

* 想問老師當初在命名 cart 時，在語意結構上是什麼意思？購物車的意思嗎？
* 如果單純就這一節的練習來說，把 '.content>.cart>ul' 的結構改成 'ul.content.cart'，是不是也不會影響呈現的結果？
* 從 lightbox 下載的檔案中，好像有添加 jQuery 的 js 版本，以及單純提供 lightbox 功能的 js版本。不過老師給的範例網頁，有同時引入 jQuery2.2.3 和 lightbox-plus-jquery 這兩支 js，想問說是不是引用其中一支就好了？

回饋

* 我在作業中用了 jQuery3.3.1，發現同時使用 lightbox(沒 plus jQuery 的版本) 和 nivo 是沒問題的 (看起來啦)。只是想在 all.js 引用 nivoSlider 的函式的話，需要照老師在上一節提到範例碼的修改

```javascript
   $(window).on('load', function(){  
    $('#slider').nivoSlider(); 
  });
```

## 8-56 Peity - 無痛設計網頁圖表資訊

* [Peity • progressive  pie, donut, bar and line charts](http://benpickles.github.io/peity/)
* 用開發工具看網頁被 js 生成了什麼，然後用 css 調整被生成的 SVG 大小，讓圖表變長變高
* [HW8-56 Peity - 無痛設計網頁圖表資訊 | jQuery @HexSchool](https://codepen.io/ayugioh2003/pen/KerWbJ)

有辦法做成複合式的圖表嗎?

* 這圖表是有辦法的，
* 但是你必須先瞭解 JavaScript 如何來儲存資料才有辦法使用這種圖表，例如 JS 物件與陣列，
* 這段會在你修到「JavaScript 學徒的試煉」才會比較好能理解哩 :D
* 例如 chart.js\~

老師我們一般製作圖表時，都會將資料（文字或者數值）放在圖筆上面，如果想要製作一個如下的圖片的話該怎麼寫呢？？

* 相信你已經有探求下一階段的慾望了，這邊就推坑你一個新的方向
* 這種我們稱為資訊圖表
* 通常會使用另一個框架 d3.js (<https://d3js.org/>)
* 然後透過 svg 的繪圖技術來繪製
* 會使用 svg 主要原因是 svg 的結構也類似 HTML (XML)
* 另外一個特色是向量圖，適合做座標的運算
* 在繪製複雜圖形的時候變化較多且精準
* d3.js 會從 資料端取得資料
* 然後透過運算將它轉換成座標繪製在 svg 標籤內
* 類似範例參考：<http://bl.ocks.org/kerryrodden/7090426>
* 中文參考書籍：<http://www.books.com.tw/products/0010621239>
* 先前參加鐵人賽的文章(有些範例因資料源遺失所以失效)：<https://wcc723.github.io/d3js/2014/10/29/Ironman-30-days-30/>
* <https://wcc723.github.io/d3/2014/06/24/d3-js-intro/>

其他

* [\[Day 30\]Chart.js - 輕鬆完成資料視覺化 - iT 邦幫忙:: 一起幫忙解決難題，拯救 IT 人的一天](https://ithelp.ithome.com.tw/articles/10188031)
* [知了新聞 Cicadata - 貼文](https://www.facebook.com/Cicadatatw/posts/1083799068382099)

## 8-57 教你如何管理多個 jQuery Plugin

在 index.html 先載入 css，再載入 js jQuery 核心先載入，再載入第三方插件 js 寫 JS 時邊註解會比較好懂 有問題時，用 Chrome 的開發工具看哪行程式碼錯惹 有些 JS 是要 DOM 載入完成才會有效果

## 8-58 如何去查詢別人使用的 jQuery 查件

* [Parallax.js | Simple Parallax Scrolling Effect with jQuery](http://pixelcog.github.io/parallax.js/)
* 打開原始碼查看重複的關鍵字
* 用 google 搜尋關鍵字
* 看文件，如何引用與提供的 api&#x20;

我想做跟上面範例一樣的履歷表,工作經歷的部分,但我找不到那個Plugins是哪個..可以請教老師嗎\~謝謝您

* 這個時間軸履歷是用純 css 寫的，在 codepen 上就有很多範例，幫你找了下可以看此連結哦 :D
* [CodePen Search](https://codepen.io/search/pens?q=timeline\&page=1\&order=popularity\&depth=everything\&show_forks=false)

老師你好，我想問如果載入多個三方插件，可是每個插件使用的jQuery版本都不同，版本沒有互相支援，該怎麼去做統整? 1.先確認網站要幾個插件，並尋找插件 2.確保某 jQuery 版本可以兼容所有插件 3.如果 第二點沒辦法全部兼容，請找一個版本可以兼容 80%以上的插件，其它 20% 都是無用的插件，再去找這 20% 可以兼容的 jQ 核心哩
