喵喵笨兔の喵喵的家~遊戲天地

喵喵笨兔の喵喵的家~遊戲天地 - Lightview 效果插件 (燈箱效果) - 網頁內圖片或視頻，點擊後出現浮動圖片或影片

Lightview 效果插件 (燈箱效果) - 網頁內圖片或視頻，點擊後出現浮動圖片或影片

`網頁內圖片、視頻點擊後，顯現圖片、視頻原始大小的浮動視窗`

利用燈箱效果插件，讓網頁內圖片、視頻或文字連結，直接在同一個網頁顯示出圖片、影片原始大小的浮動視窗，讓您的網頁更有層次感，當您關閉後，又回到原始的頁面哦！^ ^
要達此效果，網上已有很多神大大寫好的 css 和 js，有興趣就去參考以下網站：
介紹 12 款響應式 Lightbox（燈箱）效果插件：https://www.hksilicon.com/articles/120364
笨兔前幾篇編號 html_012 有介紹一套了 html_012 Lightbox (燈箱) 效果插件，這次說說另一套 Lightview。笨兔站內的【遊戲影片】就是用此 Lightview 插件 ^^
Lightview 網站及下載：http://projects.nickstakenburg.com/lightview

本小站下載：　Lightview 3.5.1 效果插件

下載後，只要引入 lightview.css 、 lightview.js 、 jquery.js。

範例：主要看紅色字部份，或直接複製所有程式碼，另存成一個 html 檔來觀看唄 ^^ (當然圖檔要改成你自己的)

<html>
<head>
<meta charset="utf-8" />
<title>喵喵笨兔 の 喵喵的家~遊戲天地 - Lightview 效果插件</title>

    <link rel="stylesheet" type="text/css" href="css/lightview.css" />
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/lightview.js"></script>

</head>
<body>

圖片方法1：(可在圖片下方附說明)
<p>
<!-- 圖片路徑 --> 
<a href='gameimg\ff13-2.jpg' class='lightview' data-lightview-group='example' data-lightview-title="放大圖片時的說明標題" data-lightview-caption="放大圖片時的說明內容"> 
<!-- 放頁片顯示的縮圖,再自訂寬高大小 --> 
<img src='gameimg\ff13-2.jpg' alt='' width='102' height="58"/> </a> </p>

圖片方法2：(不附說明)</p>
<a href="gameimg\ff13-3.jpg" class="lightview"><img src='gameimg\ff13-3.jpg' alt='' width='102' height="58"/></a>

<div><P>Youtube 影片方法：(皆以笨兔網站仙劍6影片為例)</P> 
<!-- width和width拿掉都不設,即顯示原大小.網址是要放iframe嵌入程式碼內的網址. autoplay=1是自動撥放,不要就拿掉 -->
<a href='https://www.youtube.com/embed/1NirHNbN_Yc?autoplay=1'
class="lightview"
data-lightview-type="iframe"
data-lightview-options="
 width: 638,
 height: 360,
 viewport: 'scale'
">按我觀看 Youtube</a> </div> 

<div><P>FB 影片方法：</P>
<!-- width和width拿掉都不設,即顯示原大小.FB不設大小,其畫面有時下方會被截斷無法顯示 網址是要放iframe嵌入程式碼內的網址. &autoplay=1或&autoplay=true是自動撥放,不要就拿掉, 播放時預設一定是靜音,可透過影片播放器控制項來打開音量 -->
<a href='https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fvvv.myweb.hinet.net%2Fvideos%2F855731827839160&autoplay=1'
class="lightview"
data-lightview-type="iframe"
data-lightview-options="
 width: 800,
 height: 600,
 viewport: 'scale' 
">按我觀看 FB</a> </div> 

<div><P>Xuite 影片方法：</P> 
<!-- width和width拿掉都不設,即顯示原大小. 網址是要放iframe嵌入程式碼內的網址. as=1是自動撥放,不要就拿掉 --> 
<a href='http://vlog.xuite.net/embed/aVJScUhnLTIzODAyNDE4LmZsdg?as=1' 
class="lightview" 
data-lightview-type="iframe" 
data-lightview-options="
 width: 1024,
 height: 768,
 viewport: 'scale' 
">按我觀看 Xuite</a> </div>

</body>
</html>

範例結果：

圖片方法1：(可在圖片下方附說明)

圖片方法2：(不附說明)

Youtube 影片方法：(皆以笨兔網站仙劍6影片為例)

按我觀看 Youtube

FB 影片方法：

按我觀看 FB

Xuite 影片方法：

按我觀看 Xuite

笨兔隨手筆記於 2017/11/06

喵喵笨兔の喵喵的家~遊戲天地
http://vv0817.tk
http://vvv.lionfree.net
http://qo3op.asuscomm.com/vvv
https://uoedgpkhyfwzmd7zua8myg-on.drv.tw/vvv