*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2016年3月22日 星期二

(2016年)fancybox:一次設定多次使用


按,跳出圖片
按,跳出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)'
            }
        }
    }

教學影音:


2 則留言:

  1. 您好,我問一下,如果fancyboximg要能左右切換,要如何使用啊! 我+上rel是沒動作ㄉ

    回覆刪除
    回覆
    1. 看不太懂您的問題,能否有範例給我看一下

      刪除