画像ポップアップをさせるプラグインで超有名なプラグイン『Lightbox』。
知らないよって方はこちらをまずはご確認ください。
このプラグインを使うと公式サイトに載っているようにポップアップさせた画像の下にキャプションをつけることができます。
このキャプションはaタグのtitle(data-titleでもどちらでも可）という部分で指定します。
<a href="images/image-2.jpg" data-lightbox="example-2" title="Optional caption.">
<img class="example-image" src="images/thumb-2.jpg">
</a>このtitleの中にはhtmlタグも入れられます。
以下のサンプルはtitleの部分にpタグ、aタグ、それぞれにクラスをつけてCSSも変更してます。
ソースはこちら。
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-1.jpg" data-lightbox="example-1" title="<p class='title'>タイトル</p><p class='text'>ダミーテキストダミーテキストダミーテキスト。<br>ダミーテキスト。<a class='example' href='#'>サンプル</a>"
>
<img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-1.jpg" alt="image-1" title=""/>
</a>このようにhtmlタグを使えるんですが注意点が一つだけ。
この書き方だとtitle内でダブルクォーテーション（”）を使うと表示が崩れます。
<p class=’text’>のようにシングルクォーテーション(‘)を使うのがポイントです。
または『 < を < 』 , 『 > を > 』 , 『 “ を " 』といった具合に特殊文字を実体参照に書き換えても大丈夫です。
見栄えもCSSでちゃんと編集出来るのでデザインの幅が広がります。
