Lightbox (燈箱) 效果插件 - 顯現圖片原始大小的浮動視窗
網頁內圖片或連結點擊後，顯現圖片原始大小的浮動視窗
利用 Lightbox (燈箱) 效果插件，讓網頁內的圖片或文字連結，直接在同一個網頁顯示出圖片原始大小的浮動視窗，讓您的網頁更有層次感，當您關閉圖片後，又回到原始的頁面哦！^ ^
要達此效果，網上已有很多神大大寫好的 css 和 js，有興趣就去參考以下網站：
介紹 12 款響應式 Lightbox（燈箱）效果插件：https://www.hksilicon.com/articles/120364
在此解說一下呆呆笨兔認為是最 easy 的一種，若對您有所幫助，那就 + - 用唄！笨兔站內的【遊戲圖片】就是用此 Lightbox 插件 ^^
Lightbox 網站及下載：http://lokeshdhakar.com/projects/lightbox2
本小站下載： Lightbox 燈箱 效果插件
下載後，只要引入 lightbox.min.css 和 lightbox.min.js （或 lightbox-plus-jquery.min.js）。
- 若您有引入 JQuery 1.7 以上版本，那就引入 Lightbox 插件的 lightbox.min.css 和 lightbox.min.js。
- 若沒有引入 JQuery，那就引入 Lightbox 插件的 lightbox.min.css 和 lightbox-plus-jquery.min.js。因為 lightbox-plus-jquery.min.js 內含 JQuery 1.7 了。倘若不知有沒有 JQuery，那就固定引入 lightbox.min.css 和 lightbox-plus-jquery.min.js 即可。
- 點擊的超連結指向您要顯示原始大小的圖檔，其 href="圖檔名" 後加入 data-lightbox="roadtrip" 即可。
- 若同網頁有二張圖以上都做 Lightbox 效果插件，則圖片上就會出現上一張、下一張的箭頭，讓您可多張圖觀看！^^
範例：主要看紅色字部份，或直接複製所有程式碼，另存成一個 html 檔來觀看唄 ^^ (當然圖檔要改成你自己的)
<html>
<head>
<meta charset="utf-8" />
<title>喵喵笨兔 の 喵喵的家~遊戲天地 - Lightbox (燈箱) 效果插件</title> <link href="lightbox/lightbox.min.css" rel="stylesheet" />
<script src="lightbox/lightbox-plus-jquery.min.js"></script> </head>
<body>
<p><a href="gameimg/hero8.jpg" data-lightbox="roadtrip">文字超連結按我看結果</a></p> <p>圖檔超連結按圖看結果<a href="gameimg/ff13-2.jpg" data-lightbox="roadtrip"><img src="gameimg/ff13-2.jpg" width="200" height="96"></a></p> </body>
</html>
範例結果：
圖檔超連結按圖看結果 
笨兔隨手筆記於 2017/09/26
喵喵笨兔 の 喵喵的家~遊戲天地
http://vv0817.tk
http://vvv.lionfree.net
http://qo3op.asuscomm.com/vvv
https://uoedgpkhyfwzmd7zua8myg-on.drv.tw/vvv
喵喵笨兔 の 喵喵的家~遊戲天地
http://vv0817.tk
http://vvv.lionfree.net
http://qo3op.asuscomm.com/vvv
https://uoedgpkhyfwzmd7zua8myg-on.drv.tw/vvv