1. 特にエフェクト無し + タイトル + グループ化

クリック時のオーバーレイの色を淡いグレー(背景のこと)にした以外、特にエフェクトを指定していない状態です。<a>タグの title属性が、そのまま画像タイトルとして表示されます。
<a>タグの rel属性に同じ名前(グループ名)を入れるとグループとしてまとめられ、矢印ボタンで移動できます!

また、jquery.mousewheel.js を使えば、マウスホイールでも画像を切り替えることもできます。


2. 飛び出す感じのエフェクト + Easing + グループ化

今度は画像をクリックしたときの、飛び出す感じのエフェクトを加えてみました。動きのアニメーション自体は、jQuery easingプラグインを利用しています!

また、画像のタイトルの位置も変更、クリック時のオーバーレイの色も、黒(デフォルト)にしています。


3. Easing でエフェクトの動きを変更してみた

Easing で、飛び出すときのアニメーションの動きを変えてみました。開くとき、閉じるときのエフェクトを、それぞれ別に指定できます!
また、エフェクト時のスピードも変更できます!


iframe を使って、他のWebサイトなどを表示することもできます!もちろん上記のように、テキストリンクに採用することもできます。(Google Map は API を利用しています。)


5. テキストやフォームだって表示できます

画像だけでなく、テキストだって表示できます!下記のリンクをクリックしてみてください。隠してある(display:none)HTML を、ポップアップで表示しています。

jQueryプラグイン :: Fancyboxについて

フォームを挿入することもできるので、ログインフォームを表示させることもできます。

Back to Article

What is Fancybox

Fancybox は jQuery を使って作られている、Lightbox系のプラグインです。
画像はもちろん、iframe での HTML 表示、Youtube の動画などの表示もできます。ライセンスは MITとGPL です。

Back to Top