home ホーム search 検索 -  login ログイン  | reload edit datainfo version cmd icon diff delete  | help ヘルプ

日記/2009/03/21/サムネイル画像をクリックすると大きい画像がポップアップするJavaScriptライブラリ (v1)

日記/2009/03/21/サムネイル画像をクリックすると大きい画像がポップアップするJavaScriptライブラリ (v1)

日記 / 2009 / 03 / 21 / サムネイル画像をクリックすると大きい画像がポップアップするJavaScriptライブラリ (v1)
id: 211 所有者: msakamoto-sf    作成日: 2009-03-21 11:47:37
カテゴリ: JavaScript 

人からちょっとしたホームページ編集を頼まれて、「こんなんでどうですか~」と見せてて、画像を数点表示しているところで。
「これさ、サムネイル画像をクリックしたら、真ん中に大きな画像がポップアップするみたいに、最近よく見かける感じに出来ない?」
と言われた。

Google先生に「JavaScript image popup」とか「jQuery image popup」とか放り込んだらちょうど良いのが見つかった。

キャプションも付けられるし、ポップアップした時の枠線画像とか閉じる為の「×」画像とかとCSSも用意されているので、サンプルをコピペしてちょこっと直すだけで動く。JavaScriptは、jqueryの最新版のminバージョンも込みで入ってるので、そのまままとめて放り込むだけでOK.

<a href="(大きいサイズの画像URL)"><img src="(サムネイル画像のURL)" /></a>

という要素に対して、

$(document).ready(function() {
    $("a").fancybox();
});

という感じで適用している。<a>タグに適当なclass属性を割り当てれば、jQueryのselectorで任意のa要素だけに適用できる。
これならJavaScript-OFFの場合でも、サムネイル画像クリックで大きな画像にページ毎遷移するという最低限度の動きは残せる。


プレーンテキスト形式でダウンロード
現在のバージョン : 1
更新者: msakamoto-sf
更新日: 2009-03-21 11:57:44
md5:817fddded6d409d7eb2de74f3fd97151
sha1:900613502506501d7f6984a6e43c9587f5b93b22
コメント
commentmsakamoto-sf - 投稿日時 2009-03-21 12:01:59
補足。Fancyboxは画像だけではなくてiframe要素や外部URLやAjaxレスポンスも枠線で囲ってポップアップできる。業務アプリなどでも使い道が有りそう。
コメントを投稿するにはログインして下さい。