2014年07月03日


Facebox v1.3 の正しい設置方法と使用方法









▼ href の画像を表示します


▼ href に他の id を指定してその内容を表示します


▼ url で指定されたテキストの内容を HTML として表示します
(但し、クリックした後2秒後に閉じます)


▼ ajax で読み込んだ内容を表示します
ダウンロード

Facebox 1.3

自分のサイトにアップロード

1) facebox.js
2) facebox.css
3) closelabel.png
4) loading.gif

ファイルをアップロードできるブログであればブログでも可能です。(Google ドライブを使うと簡単です)

アップロードする前に、facebox.js 内の closelabel.png と loading.gif の URL を直接 http から記述しておけば、実行するページからプログラムで変更する必要がなくなります。

facebook.js の変更部分(URLを3つ)
$.extend($.facebox, {
  settings: {
    opacity      : 0.2,
    overlay      : true,
    loadingImage : 'https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/facebox13/loading.gif',
    closeImage   : 'https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/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://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/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 と 同一ドメインである必要がありますが、Google Drive を使うと他ドメインからでも読み出せる設定に Google 側が設定しています
( access-control-allow-origin:* を返してくれる )

image_001.txt
message_001.txt

rel="文字列" で、文字列は自由に設定可能で、facebox の初期処理で指定します
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
</head>
<body>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type=text/javascript src="https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/facebox13/facebox.js"></script>
<link type="text/css" rel="stylesheet" href="https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/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>
(但し、クリックした後2秒後に閉じます)
</div>
<a href="https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/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://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/facebox13/message_001.txt' })">

</body>
</html>
関連する記事

lightbox.js の正しい設置方法


posted by at 2014-07-03 02:33 | Comment(0) | 小ネタ | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します