【jQuery】 fancyBox を導入してみた(仮)

JavaScrip/jQuery はまだ勉強中で細かいことは理解できてませんが、jQueryを利用したモーダルウィンドウの『fancyBox』を試しに導入してみました。

『fancyBox』を利用すると、例えば、下記画像をクリックした時のようなモーダルウィンドウ表示になります。

sample1.jpg

とあるサイトを見ていたら、この印象的なモーダルウィンドウが表示されたので、どんな仕組みなのか調べてみたら、どうやら『fancyBox』というjQueryを利用しているものだと分かりました。

このブログでも実装できないかと試してみました。

公式サイト
fancyBox
⇒http://fancyapps.com/fancybox/

fancyBox

FC2ブログ導入方法(仮)

  1. ホームページに導入するのと違って、FC2ブログに導入するとなるとちょっと一手間加えなくてはなりません。

  2. 公式サイトからファイルパッケージをダウンロードし、圧縮されているので展開します。そして「source」フォルダ内のファイルをFC2ブログのサーバーにアップロードします。

  3. まずは画像をアップロードします。画像はgif形式のファイルです。

  4. CSSファイル「jquery.fancybox.css」のコードを編集します。ファイル内の画像URLコードをアップロードしたURLに修正します。検索機能で「.gif」を検索すると簡単です。

  5. 公式サイトからダウンロードしたファイルですが、「jquery.fancybox.css」「jquery.fancybox.pack.js」と、拡張子以外の部分に『 . 』ドットが入っています。FC2ではこのままではアップロードできないので、ドットを『 _ 』アンダーバーなどに変換します。例「jquery_fancybox.css」「jquery_fancybox_pack.js」

  6. ブログテンプレートの設定から、HTMLの編集をします。ここではオプションを含まない、一番シンプルなコードです。

  7. head の部分にアップしたCSSファイルを読み込むコードを書きます。アップロード先のURLに置き換えて読み込みます。

  8. <link rel="stylesheet" href="http://***/jquery_fancybox.css" type="text/css" media="screen" />
    
  9. 続けてアップしたJavaScriptファイルを読み込むコードを書きます。アップロード先のURLに置き換えて読み込みます。先にjQueryを読み込む必要があるので、jQueryを読み込むコードも書いておきます。

  10. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://***/jquery_fancybox_pack.js"></script>
    
  11. 動作条件のJavaScriptのコードを書きます。これはclassにfancyboxと記述すると動作するコードです。

  12. <script>
    jQuery(function($){
    $(".fancybox").fancybox();
    });
    </script>
    
  13. 記事中に画像を書くときのコードを下記のようにします。

  14. <a href="***.jpg" class="fancybox" title="画像のタイトル"><img src="**.jpg" alt="サムネイル画像"></a>
    
  15. class="fancybox" と記述すると動作します。

  16. 複数枚をギャラリー表示するときは下記のようにします。

  17. <a href="***.jpg" class="fancybox" title="画像のタイトル" rel="group"><img src="**.jpg" alt="サムネイル画像"></a>
    
  18. rel="group**" のように書いて、**部分を使い分けることで複数のギャラリーを用意できます。

  19. ここで紹介したのは一番シンプルな表現です。いろんなエフェクトをつけることもできますが、それは別途お調べ下さい。

fancyBox 単独表示

sample1.jpg

fancyBox ギャラリー表示

sample2.jpg sample3.jpg sample4.jpg

shadowbox

FC2ブログ導入方法

モーダルウィンドウは『shadowbox』を導入済みなので、そちらも参考にしてみてください。

エボリアヌーメ
Shadowbox を導入してみた
⇒http://kumarajyu.blog.fc2.com/blog-entry-435.html

shadowbox 単独表示

2014-12-17_00025.jpg

shadowbox ギャラリー表示

2014-12-17_00006.jpg 2014-12-17_00009.jpg 2014-12-17_00015.jpg

関連記事
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

コメント

宵乃
ギャラリーを作る時にこういうのを導入しようか悩んだんですよね~。
結局、ブログが重くなりそうでやめたけど、良く考えたらhtmlをアップして、そこにギャラリーを作ればよかったかも…。それならいくらjsファイルやcssファイルが増えても、ブログには影響ありませんし。

>モーダルウィンドウは『shadowbox』を導入済みなので、そちらも参考にしてみてください。

この『shadowbox』と『fancyBox』の違いは軽さとかでしょうか?
どちらが使いやすいですか。他にもたくさんやり方がありそうですね。
css3でもできるようだし、選ぶのだけでも面倒そうです(笑)
宵乃 さんへ
ブログだとカラム幅の制限で大きな画像が使いづらいんで導入してます。画像をクリックする度に大きな画像を別ウィンドウで開くとなるとユーザビリティが良くないですから。

モーダルウィンドウは比較的簡単なプログラムなので、jsファイル自体は軽いです。

shadowboxとfancyBoxの違いはjQueryを使っているか否かの違いがありますが、どちらもJavaScriptのプログラムが書けないと機能を使いこなせないです。私はまだ使いこなせていないので何とも言いがたいです。結局は見た目で選んでますw

基本的な仕組みはどちらもサムネイル画像を本体画像とリンクしています。なのでサムネイル画像を読み込む速度は重要で、枚数が多くなるとアクセシビリティに影響が出てくると思います。本体画像はクリック時に読み込むので、アクセシビリティに影響は少ないでしょう。

モーダルウィンドウはlightboxが代表的なので、「lightbox系」で検索するとたくさん出てきます。

コメントの投稿

非公開コメント


ページ下部までご覧いただきありがとうございました。