«

»

Print this 投稿

Lightbox v2.04で改行を入れたいが・・・

写真をカッコ良く見せる為に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>

関連記事

Permanent link to this article: http://abundcore.net/archives/539

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次の HTMLタグおよび属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>