HTML CSS? 画像をクリックされた時、拡大画像とコメントを表示したい

Question

参考サイト

やりたいこと

このように画像が並んでていて
画像が選択したとき
拡大画像とともにコメントを表示できる機能を実装したいのです。

イメージとしては画像を拡大というよりは
画像を選択すると
選択された画像の拡大画像とコメントのウィンドウが表示される
ような動作を作りたいです。

選ばれた画像の表示の拡大はCSSを使用して実装できることがわかったのですが
ウィンドウとなるとJavaScriptを使用するのか調べても発見できず
どのように実装すれば実装が可能でしょうか？

参考サイトやサンプルコード等あれば教えていただきたいです。

Answer 1

jQueryを使用するのが前提条件ですが、
以下のようなスクリプトを使用するといいと思います。

lightbox2

上記スクリプトを読み込んで、
Aタグに説明文などを追記するだけで使えました。

Comments

[amaguri]

ありがとうございます
試して見ます！

[amaguri]

使用して見たのですがこれはコメントはマウスで選択、クリックされない場合でも表示になるのですね。。
コメントも削除にしたいのですが。。

[kei344]

To: amaguriさん
公式のサンプルの状態では「コメント」は拡大されるまで表示されません。使用されたコードを質問文に追記されることをお勧めします。

[amaguri]

解決しました！
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" data-lightbox="example-set" data-title="ここにコメントを書く.">
でうまくいきました！

[airia]

レス出来なくてすいません。
無事解決出来てよかったです。

似たようなライブラリは他にもありますので、
探してみるのもいいかもです。