2013年10月11日 1:41 PM  カテゴリー: javascript, jQuery, Tips, web制作

レスポンシブにも対応。実装も簡単でデフォルトのままのそのまま使えるfancybox。

fancyboxは個人的にお気に入りでかなり多様しています。何が良いかってすごく実装が簡単で、レスポンシブにも対応しているのでデバイスに関係なく使用できるところ。
デフォルトのデザインもいいので余計な手を入れることなくそのまま使えます。お勧めです。

デモページ>> http://gallery-lounge.com/demo/fancybox/

html

  • head内でjqueryの読み込み
  • fancyboxのフォルダを丸ごと読み込んで必要箇所だけ使うのが簡単です。今回はCSSと画像なども合わせて利用しています。

  • a要素にclass="fancybox"
  • rel="group"でリスト化した画像がグループ化され、NextPrevのボタンが実装される。記述しないと非表示になる
  • リンク先a要素に大きい画像、img要素にサムネイルとなる画像

javascript

  • 非常にシンプルなjs

ちなみにロードと同時に実行したい場合には以下。こうすると画面遷移してきたと同時にポップアップのように表示してくれる。fancybox結構使えますね。

これはもうポップアップと同じような感じですね。

オプション等は作者サイト参照ください。

http://fancyapps.com/fancybox/

ABOUT

仕事と子育てを楽しむパパです。 趣味は漫画、映画、海外ドラマ、波乗り、スノボ、カメラ。 最近いけてないけど旅行も大好き。仕事はweb以外にも企業向け技術教育事業、投資、ディレクション、アパレル、写真、店舗プロデュースなどなどなんでもこなします。

Twitter