web dimension maker

lightbox2.02を使う場合、キャプションが長いと文字がはみ出してしまいます。そこで、title属性内に<br />を使わずにキャプションを改行させる1案を考えました。

lightbox2.02の設置方法等は割愛させていただきます。僕よりもすばらしい技術者の方の記事が沢山ありますし。

CSSで調節するやり方もあると思うのですが、うまいこといかなかったのでlightbox.jsを少しいじることにしました。

まず今回の根本的な考え方ですが、「title属性ではなく、a要素内に書かれた(最後の)span要素内のHTMLを読み込む」という考え方に基づいて作ります。準備するHTMLは下記のようになります

<a href="images/image-2.jpg" rel="lightbox"><img src="images/thumb-1.jpg" alt=""><span>abcd<br />efghi</span></a>

lightbox.jsは2箇所を下記のようにします。

1.before

imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));

1.after

var caption = imageLink.lastChild;
imageArray.push(new Array(imageLink.getAttribute('href'), caption.innerHTML));

2.before

imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));

2.after

var caption2 = anchor.lastChild;
imageArray.push(new Array(anchor.getAttribute('href'), caption2.innerHTML));

こちらのサンプルページでご確認ください

a要素の中というのがこの方法の弱点かと思います。また、<br />と不用意なspan要素が嫌いな人にはあまりいい手段ではないかと思います。