写真をカッコ良く見せる為にLightboxのJavascriptを使うのですが、
http://lokeshdhakar.com/projects/lightbox2/
しかし、説明文を入れるのにtitleに入れる形になる。下記が例。
<a href=”images/image-1.jpg” rel=”lightbox[plants]” title=”ああああああああああああああああああああああああ”><img src=”images/thumb-1.jpg” width=”100″ height=”40″ alt=”” /></a>
ここで説明文が長文になったときに改行を入れたいと思うと、、<br>タグを入れば改行される。
当然、W3Cのチェック(http://validator.w3.org/check)は通らない。
なので、通るように、##を入れると<br>に変更してくれるように作り変える。
Lightbox v2.04の場合は lightbox.jsの下記の2行の間に1行追加。
///////////////////////////////////////////////////////////////////////
var imageNum = 0;
if ((imageLink.rel == ‘lightbox’)){
////////////////////////////////////////////////////////////////////////
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
///////////////////////////////////////////////////////////////////////
var imageNum = 0;
imageLink.title = imageLink.title.replace(/##/g,”<br />”);
if ((imageLink.rel == ‘lightbox’)){
////////////////////////////////////////////////////////////////////////
さらに、追記です。このままだと、Next機能に対応できない為、下記の行も変更。
///////////////////////////////////////////////////////////////////////
collect(function(anchor){ return [anchor.href, anchor.title; }).
///////////////////////////////////////////////////////////////////////
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
///////////////////////////////////////////////////////////////////////
collect(function(anchor){ return [anchor.href, anchor.title.replace(/##/g,”<br />”)]; }).
///////////////////////////////////////////////////////////////////////
変更後、HTMLを書く。
<a href=”images/image-1.jpg” rel=”lightbox[plants]” title=”あああああああああああ##あああああああああああああ”><img src=”images/thumb-1.jpg” width=”100″ height=”40″ alt=”” /></a>