喵喵笨兔の喵喵的家~遊戲天地 - Lightbox(燈箱)效果插件-顯現圖片原始大小的浮動視窗

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