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

jQuery Fancybox を導入してみた

前回の記事 jQuery版LightBoxクローンを探す で、紹介したスクリプトから、まずは、高機能そうな Shadowbox に挑戦してみましたが、複数のライブラリに対応しており高機能なためか導入もかなり複雑で、FC2ブログではうまくいきませんでした。FC2ブログでの導入例を探してみましたがYUIライブラリの導入例は見つかりましたが、jQueryでの導入例は見つかりませんでした。で、これは断念しました。

次に挑戦したのが、デザインがよさげでアニメーションも面白そうな Fancybox でした。これは割と簡単に導入できました。ということで、FC2ブログでの導入例として紹介します。

難易度:

まずは下記からZipファイルをダウンロードして解凍します。

jquery.fancybox-1.2.1.zip

解凍してできた jquery.fancybox というフォルダ内の画像ファイル(*.png)と jquery.fancybox-1.2.1.js(または jquery.fancybox-1.2.1.pack.js) jquery.fancybox.css jquery.easing.1.3.js の3ファイルをFC2ブログの管理画面よりアップロードします。(jQueryを導入していない場合はjQueryファイルも)

ただしファイル名にピリオドが含まれているとFC2ブログでは拒否されますので 3ファイルは fancybox.js fancybox.css easing.js と名前を変更してアップしました。

テンプレートのHTMLの headブロック内に、下記のように記述しました。(*********はファイルアップロード先のパスにしてください。)

6行目の $(".nopop") の部分はfancyboxを適用したい要素のセレクタを指定します。当ブログの記事では画像ファイルのリンクには、たまたま下記のようにclass名を設定していたのでこのように指定しました。

jQueryのセレクタの指定に沿った記述をすればclass名以外にもidやその他の属性で指定することも可能です。例えば、jpgファイルにリンクされている要素はすべてfancyboxでポップアップさせたいのなら下記のように指定すればいいでしょう。

7行目以降はオプションの設定をしています。意味は名前からだいたい察しが付くと思いますので説明は省略します。当ブログでの設定例ですのお好みで変更してください。最後の3行(easing*)についてはアニメーションの動きの細かい設定になります。設定値については下記のページを参照ください。

jQuery Easing - jQuery 1.3.2 日本語リファレンス


拍手する

Leave a reply






Trackbacks

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