▼ href の画像を表示します
▼ href に他の id を指定してその内容を表示します
▼ url で指定されたテキストの内容を HTML として表示します
(但し、クリックした後２秒後に閉じます)
(但し、クリックした後２秒後に閉じます)
▼ ajax で読み込んだ内容を表示します
ダウンロード Facebox 1.3 自分のサイトにアップロード 1) facebox.js 2) facebox.css 3) closelabel.png 4) loading.gif ファイルをアップロードできるブログであればブログでも可能です。 アップロードする前に、facebox.js 内の closelabel.png と loading.gif の URL を直接 http から記述しておけば、実行するページからプログラムで変更する必要がなくなります。 facebook.js の変更部分(URLを3つ)
$.extend($.facebox, {
settings: {
opacity : 0.2,
overlay : true,
loadingImage : 'https://lightbox.sakura.ne.jp/demo/facebox13/loading.gif',
closeImage : 'https://lightbox.sakura.ne.jp/demo/facebox13/closelabel.png',
imageTypes : [ 'png', 'jpg', 'jpeg', 'gif' ],
faceboxHtml : '\
<div id="facebox" style="display:none;"> \
<div class="popup"> \
<div class="content"> \
</div> \
<a href="#" class="close"><img src="https://lightbox.sakura.ne.jp/demo/facebox13/closelabel.png" title="close" class="close_image" /></a> \
</div> \
</div>'
},
※ プログラムからは以下のようにして変更します
$.facebox.settings.closeImage = '/images/facebox/closelabel.png'
$.facebox.settings.loadingImage = '/images/facebox/loading.gif'
または、
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loadingImage : 'images/loading.gif',
closeImage : 'images/closelabel.png'
})
})
j設置 jQuery が必要ですが、google がホスティングしているものを使います。 あるいは、jQuery をダウンロードして設置して下さい。 このサンプルでは、外部ファイルとして image_001.txt と、message_001.txt を使っています。その為、実行する URL と 同一ドメインである必要があります。( access-control-allow-origin:* を返す場合はどこからでも OK ) image_001.txt message_001.txt rel="文字列" で、文字列は自由に設定可能で、facebox の初期処理で指定します
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://lightbox.sakura.ne.jp/demo/facebox13/facebox.js"></script>
<link type="text/css" rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/facebox13/facebox.css">
<script type="text/javascript">
// jQuery の画面準備完了時のイベント
$(function(){
// rel 属性で対象を決定しています( ここでは、my_image が含まれるもの )
$('a[rel*=my_image]').facebox()
// イベント登録
$(document).bind('beforeReveal.facebox',
function(){
console.log("実行直前");
});
});
</script>
<div>▼ href の画像を表示します</div>
<a href="http://lh6.ggpht.com/_IzfbcNjqGuE/S1jkKM952HI/AAAAAAAAAPU/CheJ6YkRGPM/s720/b15architecture_exteriors014.jpg" rel="my_image1"><img src="http://lh6.ggpht.com/_IzfbcNjqGuE/S1jkKM952HI/AAAAAAAAAPU/CheJ6YkRGPM/s128/b15architecture_exteriors014.jpg" style='border-width:0px;'></a>
<br><br>
<div>▼ href に他の id を指定してその内容を表示します</div>
<a href="#my_div" rel="my_image2"><img src="http://lh3.ggpht.com/_IzfbcNjqGuE/S1j75KHGTZI/AAAAAAAAARg/l_d3g2d4fb0/s128/b17diederik015.jpg" style='border-width:0px;'></a>
<div id="my_div" style='display:none'><t5>divの中にタイトルと画像をセットして、display:none を指定しています</t5><img src="http://lh3.ggpht.com/_IzfbcNjqGuE/S1j75KHGTZI/AAAAAAAAARg/l_d3g2d4fb0/s720/b17diederik015.jpg" style='border-width:1px;'></div>
<br><br>
<div>
▼ url で指定されたテキストの内容を HTML として表示します
<br>
(但し、クリックした後２秒後に閉じます)
</div>
<a href="https://lightbox.sakura.ne.jp/demo/facebox13/image_001.txt" rel="my_image3"><img src="http://lh3.ggpht.com/_IzfbcNjqGuE/S1js9TWpzrI/AAAAAAAAAP0/OG-rkSIkyIQ/s128/b7architecture_exteriors045.jpg" style='border-width:0px;' onclick='setTimeout(function(){$(document).trigger("close.facebox")},2000)'></a>
<br><br>
<div>▼ ajax で読み込んだ内容を表示します</div>
<input type="button" value="メッセージ" onclick="$.facebox({ ajax: 'https://lightbox.sakura.ne.jp/demo/facebox13/message_001.txt' })">
</body>
</html>
関連する記事 lightbox.js の正しい設置方法
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
