rel属性無しでLightbox JS v2.02
Posted on 5月 3, 2006
Filed Under lightbox, javascript |
Lightbox2.02お試しでも使ったLightbox JS v2.02の小技をご紹介。
Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.
写真を綺麗な見栄えで見せてくれるツールです。
ただ、使うためには、画像にrel属性を入れないといけません。
↓こんなふうに。
<a href=”image.jpg” rel=”lightbox”><img alt=”image.jpg” src=”image.jpg” /></a>
めんどくさいです。
回避方法はいろいろあり、
Lightbox JS の rel 属性を自動付与するに詳しいのですが、
今回は Lightbox Plusに対する同様の変更 ： Lightbox Plus で画像を同一画面にオーバーレイして表示を参考に、
Lightbox JS v2.02のrel属性いらない版をつくりましたので公開です。
使い勝手が少し変わりました。
[従来]
・rel=”lightbox” を入れると、単品画像のLightbox化
・rel=”lightbox[hoge]” を複数の画像に入れると、グループ化
[変更後]
・画像の拡張子がjpg,gif,png,bmpなら単品画像のLightbox化
・rel=”lightbox[hoge]” を複数の画像に入れると、グループ化 （従来どおり）
ソース
line.180辺りを
prev:
if (anchor.getAttribute(’href’) && (relAttribute.toLowerCase().match(’lightbox’)))
aft:
if (anchor.getAttribute(’href’) &&
( (relAttribute.toLowerCase().match(’lightbox’))
|| (anchor.getAttribute(’href’).match(/.+(jpg|gif|png)$/i)) ) )
line.330辺りを
prev:
// if image is NOT part of a set..
if((imageLink.getAttribute(’rel’) == ‘lightbox’))
{
// add single image to imageArray
imageArray.push(new Array(imageLink.getAttribute(’href’), imageLink.getAttribute(’titl’)));
} else{
// if image is part of a set..
// loop through anchors, find other images in set, and add them to imageArray
for (var i=0; i
if (anchor.getAttribute(’href’) && (anchor.getAttribute(’rel’) == imageLink.getAttribute(’rel’)))
{
imageArray.push(new Array(anchor.getAttribute(’href’), anchor.getAttribute(’title’)));
}
}
imageArray.removeDuplicates();
while(imageArray[imageNum][0] != imageLink.getAttribute(’href’)) { imageNum++;}
}
aft:
// if image is part of a set..
if( (imageLink.getAttribute(’rel’) != null) && (imageLink.getAttribute(’rel’) != ‘lightbox’ ) && (imageLink.getAttribute(’rel’).toLowerCase().match(’lightbox’)) )
{
// loop through anchors, find other images in set, and add them to imageArray
for (var i=0; i
var anchor = anchors[i];
if (anchor.getAttribute(’href’) && (anchor.getAttribute(’rel’) == imageLink.getAttribute(’rel’)))
{
imageArray.push(new Array(anchor.getAttribute(’href’), anchor.getAttribute(’title’)));
}
}
imageArray.removeDuplicates();
while(imageArray[imageNum][0] != imageLink.getAttribute(’href’)) { imageNum++;}
}
else
{
// if image is NOT part of a set..
// add single image to imageArray
imageArray.push(new Array(imageLink.getAttribute(’href’), imageLink.getAttribute(’title’)));
}
ダウンロードは download modified Lightbox JS v2.02
added 2006/05/08 23:45
Firefoxでrel属性無し版が動作しない不具合を修正いたしました！
Comments
16 Responses to “rel属性無しでLightbox JS v2.02”
Leave a Reply
Pleas read:
http://www.huddletogether.com/2006/03/29/lightbox-v20/#comment-2640
You can help me?
Please Read:
http://www.huddletogether.com/2006/03/29/lightbox-v20/#comment-2640
You can help me?
トラバ重複した方失礼いたしました..
はじめまして！ 小粋空間さんのトラックバックから知り拝見させて頂きました。そこで、以前から「Lightbox」には興味があり使用していたのですが今回この記事を拝見させて頂き更にこちらを使用させて頂きたく思い「Lightbox JS v2.02」にチャレンジしてみたのですが、当Blogのように横に広がります。どの部分を修正すればいいのでしょうか？また、relタグいらない版もダウンロードさせて頂き通常のタグを打ち込んでも反映されません。お手数おかけしますがサポート宜しくお願いできませんでしょうか？
panserさん
横に広がる方はなにを問題にされているのかごめんなさいよくわかりません。
relタグいらない版でLightbox動かないのはどのurlのどのimgですか？
教えていただければみてみます･･･
説明不足また、説明がうまくできなくてすみません。昨日までは、強制的にrel=”lightbox[hoge]を挿入させうまく動作するかやってみました。すると、貴Blogのように写真の大きさに表示しなく写真は表示されるのですが白いところが横伸びになってしまいました。それで、とりあえず本日は、「relタグいらない版」をしたくて、通常のタグを打ち込み、貴方様の「download modified Lightbox JS v2.02」をダウンロードして、後の必要なものは、http://www.huddletogether.com/projects/lightbox2/
からダウンロードしてUPしました。しかし、Lightbox JS v2.02が動作してくれません。
一部修正が必要な部分は修正できていると思います。
お手数ですが後どの部分を修正すればいいのでしょうか？サポート宜しくお願いします。
※５月５日の焼酎の写真で反映させたいと思っています。
今もトライしてみましたがやはりうまくいきません。
※Blog「Ricordo」５月５日記事「焼酎」の画像での不具合（http://vita.qee.jp/）
不具合点
１）下記通常タグが「relタグいらない版」で反映されない
２）画像部分のタグを下記のように直接変更して画像は表示されるが画像の横部分が白く横伸びになったままになる
また、他にも画像部分タグを色々変更しましたがやはり動作的におかしいです。
何度もすみませんがサポート宜しくお願い致します。
1)について、relタグなし版で動かない状態を私が確認できるような情報をいただけませんか？
relタグを入れていないテストページをつくっていただければ済むと思います。
2)については、おっしゃるとおり画像の背景のグレー部分が横に伸びているのは確認できました。
Flashが透過して見えてしまっているので、もしかしたら
http://www.huddletogether.com/2006/01/10/lightbox-js-update/#comment-924が関係しているかもしれません。
Flashを外しても同じことが起きるか見てみてはどうでしょう？
また、そもそもjavascriptのエラーがあるようです(IEでエラーメッセージが出る)。
そちらを先に直した方がよろしいかと思います。
この内容で解決の糸口が見つからなければ、私のrelタグ無し版の修正内容とは関係ないと思いますので、Lightbox本家サイトの方へお問い合わせください。
テストページを作成しました。確かに、IEでは、relタグなし版動作しました。ただ、Mozilla Firefoxでは動作しないようです。直接、relを打ち込むとIE、Firefox共に正常に動作しました。ただ、フェードする動作が最初だけで後は、フェードしないようです。貴Blogのお試しでは何度でも動作してるようですね。
いづれにしても、本来のBlogでは正常に表示されません。良かったらサポート宜しくお願いします。
追記
テストページ：http://vita.qee.jp/blog/
panserさん
relタグ無し版がFirefoxで動作しない不具合、修正いたしました。
不具合報告どうもありがとうございます！
画像の背景のグレー部分が横に伸びている現象は、追記で書いていただいたテストページでは発生していない（IEで確認）ので、
トップページとのコードの差を1つずつ減らしていけば、
なぜそれが起こっているのかわかるはずです。
お試しください..
返信ありがとございます。早速対応して頂いたようなのでダウンロードしてみて確認させて頂こうと今しがたやってみました。ところが、やはり「Mozilla Firefox」では同じ不具合がおきます。お手数ですがもう一度確認お願い致します。
くっ！たびたびすみません、更新しましたのでお試しください(･ω･)
何度もすみませんでした。今しがたダウンロードさせて頂き試させて頂きました。おみごと！両ブラウザー共確実に動作しております。色々とお願いしたような感じになり親切な対応とても感謝しております。ひとつお聞きしたいのですがグループ化の場合は、やはり手動でタグを挿入しなければいけないのですね
（また、おてすきの時にでも可能であればグループ化バージョンも良ければお願い致します）
いづれにしても大変便利になりましたのでこれから重宝させて頂きます。では、今後とも宜しくお願い致します。
rel=”tag”の誤解
MT3.3のテンプレートを見ていたら、タグを表示させる部分に<a href="http://example.com/mt/mt-sear…
lightbox js V2.0
こないだ見かけたlightbox js V2.0とやらを導入。 クリックしてみる…