この度portfolioの見せ方をThickboxからfancyboxに変えました。これが案外日本語訳サイトないんですよね。
fancyboxもThickboxと同じくjQuery系です。動きがかわいい。写真周りにドロップシャドウがかかるから、なんか手抜きに見えない。無駄なdescriptionを入れない。画像クリックで前後の写真に移動出来る。えとせとら。デメリットは重いこと。IE系だとガクっガクガクってなります。世界の主要ブラウザIEを敵に回していいものか悩みましたが、まあ気にしない。Firefoxやsafariが問題なければいいやっ、IEでも見えなくはないし。私にとってはかなり使いやすそうだったので乗り換え決定。せっかくなので適当な使い方講座、載せておきます。
- タイトルの右側部分にダウンロードマークがあるので、ごっそりダウンロード。cssもjsファイルもimgファイルも全部同じ階層にあります。このまま自分のサイトフォルダに入れてしまいましょう。場所はどこでも。
- 必要なファイルは
[fancy.css],
[jquery-1.2.3.pack.js],
[jquery.fancybox-1.0.0.js],
[jquery.pngFix.pack.js]
の４つと画像ファイルです。jsファイルは少々複雑な名前ですが、確認してください。コードを書く時にピリオドの位置を間違えて動作しなかった。というバカな現象が私の身には起こりました。 - <head>内にコードを書きます。位置的には一番最後、閉じる直前が良いと思います。
<link rel=”stylesheet” type=”text/css” href=”../common/fancybox/fancy.css” media=”screen” />
<script type=”text/javascript” src=”../common/fancybox/jquery-1.2.3.pack.js”></script>
<script type=”text/javascript” src=”../common/fancybox/jquery.pngFix.pack.js”></script>
<script type=”text/javascript” src=”../common/fancybox/jquery.fancybox-1.0.0.js”></script>fancyboxフォルダの階層へのパスを確認してください。私はcommonというフォルダの中に入れていたので上記のようなパスになっています。htmlと同じ階層にfancyboxフォルダがあるなら、../commonは外してしまいましょう。その他の場合も臨機応変で。
- 上記の４行の下にタグを挿入します。
<script type=”text/javascript”>
$(document).ready(function() {
//Activate FancyBox
$(“.recent_e ul li a”).fancybox({
‘hideOnContentClick’: true,
‘overlayShow’: true
});
$(“div#right a”).fancybox({
‘hideOnContentClick’: true,
‘overlayShow’: true
});
});
</script>太文字&打ち消し線部分はfancyboxで表示させたい写真や文章を置いてる部分を囲っている<div>の名前を挿入します。全体にかけるとリンク先までfancyboxで表示されてしまうので気を付けましょう。ちなみに私は２箇所指定しているので、 $(“クラス名”).fancybox({から});までを２回繰り返していますが、１箇所だけで十分なら8行目から11行目は消してしまいましょう。
- 上で指定した<div>の中にaタグを入れると勝手にfancyboxで表示されます。グループ化したい場合はrelタグを入れましょう。
<a href=”sample.jpg” rel=”sample” title=”sample”>イメージ（文字でも画像でも）</a>
titleタグは入れても入れなくても、どっちでも大丈夫です。
ざっとこんなものでしょうか？４番目のoverlayShowやらhideOnContentClickをtrueにするかfalseにするかはお好みで。
本当に適当な説明ですみません。なぜか私これを設置するのに１日かかったんですよね。こまごまとひっかかって。面倒なのは４番目の手順だけで、その他の手順はlightboxと似ているので大丈夫だと思います。
ではみなさん素敵なFancyBoxライフをっ！！
追記：４番目の手順を別の記事にて詳しく書いてみました。お役に立てれば幸いです。
January 20, 2009 at 4:14 PM
[...] そういえば前回の説明で、一番面倒なところを飛ばしましたよね。わたしってば。せっかくなので、今回はそこの説明を。 とりあえず、基本の手順は過去の記事を参考にしてください。この４番目の手順、スクリプト内に入れる指示を今回はご説明。本サイトにで言うところの【Available options】の部分です。 [...]
February 2, 2010 at 5:35 PM
[...] ね。わたしってば。せっかくなので、今回はそこの説明を。 とりあえず、基本の手順は過去の記事を参考にしてください。この４番目の手順、スクリプト内に入れる指示を今回はご説明 [...]
August 28, 2010 at 3:53 AM
[...] ね。わたしってば。せっかくなので、今回はそこの説明を。 とりあえず、基本の手順は過去の記事を参考にしてください。この４番目の手順、スクリプト内に入れる指示を今回はご説明 [...]
» Leave a Reply