「Lightbox」タグアーカイブ

jquery-lightbox-0.5.jsで説明部分に改行コードを入れる場合

前回は、http://lokeshdhakar.com/projects/lightbox2/のlightbox に

改行を入れる場合でしたが、

今回は、jquery-lightbox-0.5.jsで説明部分に改行コードを入れる場合

http://www.huddletogether.com/projects/lightbox2/のjquery-lightbox-0.5.jsのバージョンになります。

下記のように変更します!

if ( jQueryMatchedObj.length == 1 ) {
settings.imageArray.push(new   Array(objClicked.getAttribute(‘href’),objClicked.getAttribute(‘title’).replace(/##/g,”<br   />”)));
} else {
// Add an Array (as many as we have), with href and title atributes,   inside the Array that storage the images references                      //change abund aoki
for ( var i = 0; i < jQueryMatchedObj.length; i++ ) {
settings.imageArray.push(new   Array(jQueryMatchedObj[i].getAttribute(‘href’),jQueryMatchedObj[i].getAttribute(‘title’).replace(/##/g,”<br   />”)));
}

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

if ( jQueryMatchedObj.length == 1 ) {
settings.imageArray.push(new  Array(objClicked.getAttribute(‘href’),objClicked.getAttribute(‘title’).replace(/##/g,”<br  />”)));
} else {
// Add an Array (as many as we have), with href and title atributes,  inside the Array that storage the images references                     //change abund aoki
for ( var i = 0; i < jQueryMatchedObj.length; i++ ) {
settings.imageArray.push(new  Array(jQueryMatchedObj[i].getAttribute(‘href’),jQueryMatchedObj[i].getAttribute(‘title’).replace(/##/g,”<br  />”)));
}

これで、うまくいくはずです。

safari1.3ではjquery-lightbox自体は使えません。

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>