| 按，跳出圖片 |
按，跳出video |
按，跳出DIV圖文框 |
這是2016年重寫的版本。
fancybox更簡單！更方便！
只要設定一次後，即可多次依自己的特定需求而被重複的使用。
圖片、影音以及圖文框都可暢快使用！
圖片、影音以及圖文框都可暢快使用！
一、讓圖片跳出來
請 按文字一 請 按文字二 請 按文字三。
請按下面圖片
jQuery及fancybox的程式碼，請放於<head>xxx</head>之間：
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/jquery.fancybox.css"
media="screen"></link>
特別小心提醒：
如果 <script src="http://code.jquery.com/jquery-1.12.4.js"></script> 這一條，因其他互動模組之使用，而早已經有被使用了。就請不要再用了，可以直接一整條（紅色部分）的刪掉。一個網頁作品中，只要有一條即可。請保留最早出 現的那一條。
圖片跳出的驅動程式碼，請放於<head>xxx</head>之間：
<script>
function fancyboximg(w0321, h0321, s0321, t0321) {
$.fancybox({
fitToView: false,
beforeShow: function () {
this.width = w0321;
this.height = h0321;
},
href: s0321,
title: t0321,
type: 'image',
padding: 5,
openEffect: 'elastic',
preload: true
});
};
</script>
要按下去地方（文字／圖片）的javascript：
onclick=" fancyboximg(寬度, 高度, '圖片網址', '這是圖說'); "
範例：
onclick=" fancyboximg(600, 450, 'https://farm2.staticflickr.com/1638/24776435164_5602003cf9_b.jpg', '這是圖說'); "
教學影音：
說明：
手型滑鼠的CSS： cursor: pointer;
二、讓影音跳出來
請 按文字；我來講《論語》
請按下面圖片
jQuery及fancybox的程式碼，請放於<head>xxx</head>之間：
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/jquery.fancybox.js"></script>
<script type="text/javascript" src="http://lmcdwriting.org/userfiles/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/helpers/jquery.fancybox-media.js"></script>
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/jquery.fancybox.css"
media="screen"></link>
影音跳出的驅動程式碼，請放於<head>xxx</head>之間：
<script>
function fancyboxvideo(w0411, h0411, s0411, t0411) {
$.fancybox({
width: w0411,
height: h0411,
href: s0411,
title: t0411,
type: 'iframe',
padding: 5,
openEffect: 'elastic',
preload: true,
helpers : {
overlay : {
css : {
'background' : 'rgba(58, 42, 45, 0.65)'
}
}
}
});
};
</script>
要按下去地方（文字／圖片）的javascript：
onclick=" fancyboxvideo(寬度, 高度, '影片來源', '影片說明'); "
範例：
onclick=" fancyboxvideo(560, 315, 'https://www.youtube.com/embed/HV53jiiSFZk?rel=0', '這是影片說01'); "
教學影音：
三、讓DIV圖文框跳出來
請按文字；跳出DIV說明
請按下面div
這裡是一個DIV，請按我。
jQuery及fancybox的程式碼，請放於<head>xxx</head>之間：
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/jquery.fancybox.css"
media="screen"></link>
DIV圖文框跳出的驅動程式碼，請放於<head>xxx</head>之間：
<script>
function fancyboxdiv(i0415, t0415) {
$.fancybox({
href: i0415,
title: t0415,
type: 'inline',
padding: 5,
openEffect: 'elastic',
preload: true
});
};
</script>
要按下去地方（文字／圖片／div）的javascript：
onclick=" fancyboxdiv('#idnamne',
'div說明'); "
教學影音：
要跳出的圖文框之設定： 就是做出一個你想要的DIV內容。如下：
很難想像的在冬天，
一種不可思議的
天空顏色。
恰似在對人的一種擁抱。
<div class="fancyboxinline" id="a0415"><br>
很難想像的在冬天，<br>
一種不可思議的<br>
天空顏色。<br>
恰似在對人的一種擁抱。<br>
</div>
<style>
.fancyboxinline {
width: 420px;
height: 270px;
background-image: url(https://farm2.staticflickr.com/1461/25380866326_769cebf322_b.jpg);
background-repeat: no-repeat;
background-size: 360px;
background-position: top left;
font-family: Verdana, '微軟正黑體';
font-size: 1.04em;
font-weight: bold;
line-height: 1.8;
text-align: right;
letter-spacing: 0.1em;
padding-right: 0.5em;
border: 1px solid gray;
}
</style>
注 意！ 讓div消失的CSS： display: none;
補充說明： overlay 的語法
<script type="text/javascript" src="http://lmcdwriting.org/userfiles/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/helpers/jquery.fancybox-media.js"></script>
helpers : {
overlay : {
css : {
'background' : 'rgba(58, 42, 45, 0.95)'
}
}
}
教學影音：
您好，我問一下，如果fancyboximg要能左右切換，要如何使用啊! 我+上rel是沒動作ㄉ
回覆刪除看不太懂您的問題，能否有範例給我看一下
刪除