グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

※2014.3.5 追記
LightBox v2.6をお使いの方はこちら。

→ LightBoxのtitleコメント内で改行（v2.6）


Lightboxを使用する際、
aタグのtitleの中に入れた文言を
改行したいようなシチュエーションがあると思います。
　
そういった場合はどうすればいいかですが、
　
<a href="sample_big.gif" title="いちぎょうめ<br />にぎょうめ"><img src="sample.gif" alt="sample" /></a>
　
これで何とかなってしまいます。
　
ですが、titleの中にHTMLタグを書きたくないと考える方も多いはず、
　
　
その場合は、HTMLソースに多少変更を加え、
jquery.lightbox-0.5.jsのほうを弄れば解決できます。
　
　

まずはaタグの方を
<a href="sample_big.gif" title="いちぎょうめ<br />にぎょうめ">
　
以下のように変更します
<a href="sample_big.gif" title="いちぎょうめ
にぎょうめ">
　
表示上で改行したい箇所で、ただの改行を行いました。
　
　
　
そしてjquery.lightbox-0.5.jsの以下の部分を
　
if ( settings.imageArray[settings.activeImage][1] ) {
$('#lightbox-image-details-caption').html(settings.imageArray[settings.activeImage][1]).show();
}
　
このように変更します。
　
var dblcap= settings.imageArray[settings.activeImage][1];
if ( settings.imageArray[settings.activeImage][1] ) {
$('#lightbox-image-details-caption').html(dblcap.replace(/\r\n/g, "<br />").replace(/(\n|\r)/g, "<br />")).show();
}
　
　
『settings.imageArray[settings.activeImage][1]』を変数に入れ、
その変数を出力する際に、
『dblcap.replace(/\r\n/g, "<br />").replace(/(\n|\r)/g, "<br />")』で
改行コードを<br />に変換して出力するようにしています。
　
　
こうすることでlightboxのコメント内で改行が可能になります。