fancybox レスポンシブ対応のモーダル系プラグイン

LINEで送る
Pocket

レスポンシブにも対応。実装も簡単でデフォルトのままのそのまま使える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/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">