MS Access Tips/Sample and VBA and Blog customize etc...

jQuery FancyBox2 にアップデイトしてみた

当ブログでは、画像、サイトマップ、メールフォームを jQuery FancyBox でポップアップ表示してます。いままで、2010/11/11リリースの Version1.3.4 を使っていました。

が、2011/11/22 に新バージョンの FancyBox2 がリリースされていましたので、こちらにアップデートしてみました。

FancyBox2

難易度:

主な変更点

影やラウンドコーナーをCSS3を利用して実現、またCSSスプライトを使用するなど、最新のテックニックを取り入れています。

ウィンドウサイズの変更にともなって、リアルタイムにFancyBoxのサイズも変更されます。

ギャラリー遷移も動きのある効果が加えられています。

さらに、ヘルパーというプラグイン機能が追加され簡単に機能を追加することができます。現在は、
前後移動、スライドショウボタンを追加できるものや、ギャラリーのサムネイルを追加できるものが用意されています。

今後、新しいヘルパーとして、 ヘルパーメディア(ビデオプレーヤー、Googleマップなど)、タッチヘルパー(タッチパネルによる操作)などが予定されているそうです。

基本的な機能に加えて、必要な機能をプラグインとして後から追加できるというのはいいですね。

それと、ライセンスが、
Commons Attribution-NonCommercial 3.0
に変更されてます。商用で利用する場合は有料になります。商用以外は無料です。

導入方法

下記のページの真ん中ぐらいの【Download v2.0.4】のボタンをクリックしてファイルをダウンロードします。

fancyBox - Fancy jQuery Lightbox Alternative

ダウンロードしたファイルを解凍して、Sourceフォルダー内の画像ファイル, jsファイル, cssファイルを一式をブログにアップロードします。(FC2ブログの場合はcss内の画像ファイルのURLは絶対アドレスに変更しておく必要があります。)

あとは、上記のリンク先に導入法の記述通りに、ブログのHTMLに、jsファイル, cssファイルのリンクを記述します。

また、画像や画像ギャラリー、Ajax、Iframe など、それぞれのタイプのHTMLやスクリプトの記述例をリンク先にありますので、参考にして記述してください。

当ブログの場合は、以前のバージョンのときのHTMLやスクリプトを変更することなく導入できました。
詳細は下記のページなどを参照してください。

jQuery Fancybox を導入してみた - hatena chips


拍手する

4 Comments

高橋 says...""

参考になる記事をありがとうございます。

1件質問です。

現在はfancyboxはVer2となり、
オプション値も変わったようです。

Ver1の「hideOnOverlayClick」オプションは
Ver2はどのオプション値になりますでしょうか?

ご存知でしたらお知恵をお借り出来れば幸いです。

よろしくお願いいたします。

2012.07.20 23:37 | URL | #mQop/nM. [edit]
hatena says..."fancybox2のオプション値?"

下記に説明されていますが、「hideOnOverlayClick」オプションがどれに当たるかはちょっとわからないですね。

http://fancyapps.com/fancybox/#docs

2012.07.21 23:58 | URL | #5uE6dEgY [edit]
高橋 says...""

なるほど、ご回答ありがとうございました。

今後ともよろしくお願いいたします。

2012.07.23 10:51 | URL | #- [edit]
hatena says..."fancybox2の「hideOnOverlayClick」オプション"

高橋さん、いまさらですが、分かりました。

overlay に関するオプションは、Helpersオプション内に入っているらしいです。

overlay をクリックしても閉じないようにするには、

$(".fancybox").fancybox({
helpers: {
overlay : {closeClick: false}
}
});

overlay を表示しないようにするには、


$(".fancybox").fancybox({
helpers: {
overlay : null
}
});

という感じです。

2012.08.20 21:28 | URL | #5uE6dEgY [edit]

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/345-583e146d
該当の記事は見つかりませんでした。