使用 Javascript 的套裝模組

第十六堂課：使用 Javascript 的套裝模組

網路上已經有非常多的套裝模組可以使用！你甚至還不太需要知道 Java script 的語法哩！只是需要參考人家寫好的使用說明即可。當然啦，如果你時間夠多，鳥哥建議可以讀一下 java script 的基礎，然後再套用 Jquery 相關的函式，這樣未來也比較好改寫！甚至也可以自己寫自己喜歡的環境哩！

使用 lightbox 進行畫面縮放

首先請參考底下網站的相關連結與介紹： http://lokeshdhakar.com/projects/lightbox2/
鳥哥將原本的資料稍微修改過一些，你可以從我們這裡下載： lightbox.zip 這個檔案。請將這個檔案放置到你的網頁根目錄，我們的範例是將這個檔案放置到根目錄就是了。如果你要自己調整，那底下的許多原始碼就請自行調整了。
在你的 <head> 宣告中，加入這三行喔！請注意，我們假設你的網頁是在 mainpage 或者是 homework 目錄下，這兩個目錄與 lightbox 是同一層的緣故：
```
	<script src="../lightbox/js/jquery-1.11.0.min.js"></script>
	<script src="../lightbox/js/lightbox.min.js"></script>
	<link rel="stylesheet" href="../lightbox/css/lightbox.css">
	
```
拿出幾張比較大的圖檔，舉例來說，使用鳥哥提供的圖檔來測試也可以。下載後，在 images/ 目錄下解開，然後將該檔案使用修圖軟體處理一下，產生較小的圖檔，圖檔高度大約 100 像素即可。
如果是單張圖，那麼使用底下的方式來產生這張圖檔與相關縮放連結：
```
	<a href="../images/chen.jpg" data-lightbox="image01" data-title="大陳">
	<img src="../images/chen-s.jpg" /></a>
	
```
data-lightbox="單獨的照片宣告，不能重複喔"
data-title="可以出現在放大的照片中左下方的文字，作為文字的說明"
如果是許多圖放在一起的模樣，亦即是放大的畫面中，可以按左、按右來持續觀察照片的話，那也很簡單，上述的『 data-lightbox="裡面放的說明相同" 』就好了！這樣就可以取得相同的縮放畫面囉！

使用 javascript 進行簡單的圖片輪播

其實就是透過簡單的 random 函數，加上 innerHTML 這兩個東西來處理即可。不過，妳最好得要先將圖片的長寬比都處理成一樣才好。

首先，將底下的程式碼寫到妳的 body 內部的某些區塊即可

<script>
        //隨機播放陣列中指定的圖檔
        var jsImg1 = new Array("../images/20141227-05.jpg", "../images/20141227-06.jpg", "../images/20141227-07.jpg", "../images/20141227-08.jpg", "../images/20141227-09.jpg");
        //設定每兩秒執行一次randomImg1() ，此行要在 function 之外
        setInterval("randomImg1()",2000);
        function randomImg1(){
                //陣列的長度 * 介於0~1間數字 ，然後在取 floor 當照片索引值
                var imgIndex1 = Math.floor(Math.random()*jsImg1.length);
                document.getElementById("myimg1").innerHTML  = "≶img src='"+jsImg1[imgIndex1]+"' width=320>";
        }
</script>

上面的程式碼可以多指定兩三個，只是你得要將裡面的 Img1 變成 Img2..，以及 myimg1 變成 myimg2..，還有 imgIndex1 變成 imgIndex2... 這樣，妳就可以指定多個項目了。

上面的程式碼寫完之後，再來就是得要指定一個 myimg1 的 div 了！

<div id="myimg1" style="width: 320px; border: 1px solid black; height: 180px; display: inline-block;">
        <img src="../images/20141227-05.jpg" width="320" /></div>

這樣就可以進行輪播，只是...如果還要加上超連結，就得要加點自己的創意功夫囉！有興趣也可以看一下底下的連結: http://ithelp.ithome.com.tw/question/10126096
還有底下的許多連結可以參考:
http://csscoke.com/2013/09/28/css-photo-wall/

本章練習與習題：

請將你的期末報告網頁上，如果有小圖切換大圖的，請使用上述的說明來重整 lightbox 模組！
將上述資料進行完畢，並於首頁加入正確的連結，將結果上傳後，到上傳網站查閱是否正確處理才可以！

第十六堂課： 使用 Javascript 的套裝模組

使用 lightbox 進行畫面縮放

使用 javascript 進行簡單的圖片輪播

第十六堂課：使用 Javascript 的套裝模組