# 八、第三方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 將上面的效果試著整合在一個網頁中吧！ ​這是我在這一節的作業，請老師幫忙查看了 謝謝老師 呈現網址: 檔案下載連結: 另外想請問一些事情 * 想問老師當初在命名 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 () * 然後透過 svg 的繪圖技術來繪製 * 會使用 svg 主要原因是 svg 的結構也類似 HTML (XML) * 另外一個特色是向量圖，適合做座標的運算 * 在繪製複雜圖形的時候變化較多且精準 * d3.js 會從 資料端取得資料 * 然後透過運算將它轉換成座標繪製在 svg 標籤內 * 類似範例參考： * 中文參考書籍： * 先前參加鐵人賽的文章(有些範例因資料源遺失所以失效)： * 其他 * [\[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 我想做跟上面範例一樣的履歷表,工作經歷的部分,但我找不到那個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 核心哩 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://ayugioh2003.gitbook.io/jquery-learning/ba-3001-disan-fang-plugin.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.