使い方は簡単です。 lightbox.js が使える環境で、以下のスクリプトを Lighbox.js の下で追加します。 せっかく、prototype.js が組み込まれているので、rel="lightbox[galleryname]" の属性セット は JavaScript にさせています。複数のギャラリーは a を全て用意してから、一気に Lightbox.setGallery を複数回実行するといいです ここは、他のライブラリとの関連で見栄えが違いますので、 正しい表示はこちらを参照して下さい
<script type="text/javascript">
Lightbox.setGallery = function (s){
($A($(s).
getElementsByTagName('a'))).
each(function(Element){Element.setAttribute("rel","lightbox["+s+"]")});
}
</script>
その後に、画像を以下のように挟んで、その下で Lightbox.setGallery() を実行するだけです。
<span id=gallery1>
<a href="http://lightbox.cocolog-nifty.com/photos/drawroom2/1248268708270468.png">
<img src="http://lightbox.cocolog-nifty.com/photos/drawroom2/1248268708270468-thumb.png" />
</a>
<a href="http://lightbox.cocolog-nifty.com/photos/drawroom2/1248097047143143.png">
<img src="http://lightbox.cocolog-nifty.com/photos/drawroom2/1248097047143143-thumb.png" />
</a>
<a href="http://lightbox.cocolog-nifty.com/photos/drawroom2/1248012765169597.png">
<img src="http://lightbox.cocolog-nifty.com/photos/drawroom2/1248012765169597-thumb.png" />
</a>
</span>
<script type="text/javascript">Lightbox.setGallery("gallery1")</script>
|
|
【ブログパーツの最新記事】
- YouTube のサムネイル画像
- Panoramio の設置
- Twitter 縦書き投稿
- Highslide JS のすすめ
- Highslide JS(画像) 用貼り付けコード作成
- ロイターウィジェット
- エキサイトブログで覚えた Twitter 公式ウィジェット
- エキサイトブログから味もそっけも無い返事が来ました。すでに知ってた情報なのですぐ理解できましたが、知らないと「は?」となりそうな表現です
- エキサイトブログはユーザーがスクリプトを書けないですが、強引にある場所から組み込んで Shadowbox を動作させました。
- 2010/02/16 オリジナルがアップデートされたので問題解決です( 旧題 : Shadowbox 3.0 final を IE7(IE6) で Flash を使えるようするには )
- 左右に記事を配置できるようにするテーブルタグを埋め込むブックマークレットをいろいろなブログシステムで使えるようにテスト中
- パノラマパーツの使い方
- 自前デコ文字
- Lightbox を使った画像のギャラリー表示を範囲指定で簡単に
- ブックマークレットでテーブルタグ埋め込み / Seesaa JUGEM livedoorBlog ココログ
- 目覚めのランキング
- 素敵なお嬢さん
- IEとGoogleは相性悪いです。
- Highslide JS 用貼り付けコード作成( HTML汎用 )
- フルスクリーン可能なストリートビュー埋め込み
