設置方法 ダウンロードした中の、lightbox.css と lightbox.js を変更する必要があります これは、ダウンロードページの 「How to Use」で述べられていますが、 同梱の画像への参照を正しくする為です。同梱されたままですと、 相対的な位置が正しく無いと表示されません。常に正しくするには http から始まる URL で指定する必要があります lightbox.css prevlabel.gif nextlabel.giflightbox.js loading.gif closelabel.gif
ですから、ページのヘッダに書くタグも以下のように書く必要があります ( 見やすいように改行をいれていますが、重要なのは URL です )
<link rel="stylesheet" href="http://lightbox.on.coocan.jp/js/lightbox204/css/lightbox.css" type="text/css" media="screen" /> <script src="http://lightbox.on.coocan.jp/js/lightbox204/js/prototype.js" type="text/javascript" ></script> <script src="http://lightbox.on.coocan.jp/js/lightbox204/js/scriptaculous.js?load=effects,builder" type="text/javascript" ></script> <script src="http://lightbox.on.coocan.jp/js/lightbox204/js/lightbox.js" type="text/javascript" ></script>
上記 URL を使ってもらってもかまいません。
以下、実際に説明されている注意書きです。
■ この順序で記述して下さい
■ ページがロードされた後でないと動作しません
■ もし、onload イベントがあってそのせいで動かないと思われる場合は、
そのイベントの最後でinitLightbox()を実行して下さい
最後に関して、BODY の onload ならば以下のようにして下さいとあります
<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">
実装方法 これは簡単です。A タグの属性に rel="lightbox[ギャラリー名]" を追加 するだけですが、今回追加仕様的なアドオンを作成しました。 オリジナルのままですと、A タグの一つ一つに指定する必要があるのですが、 範囲指定をできるようにしました。 ( ギャラリー名は半角英数にして下さい ) 以下の関数を lightbox.js の最後に追加して下さい ( lightbox.on.coocan.jp には実装済みです )
Lightbox.setGallery = function (s){
($A($(s).
getElementsByTagName('a'))).
each(function(Element){Element.setAttribute("rel","lightbox["+s+"]")});
}
その後以下のように a タグで並べた画像のリンクを挟んで下さい
<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>
あともう一つ、lightbox.cocolog-nifty に置いている lightbox.js には、ボタンで呼び出す 関数も追加してあります。 例えば、a タグ(要素)に id=img1 を追加して、onClick に、Lightbox.callNativeMouseEvent("img1") と書くだけです。ボタンだけにしたい場合は、span を非表示にすれば良いでしょう
タグ：prototype.js
|
|
【記録の最新記事】
- Java、PHP、jQuery : 最近の記事と関連する記事のまとめ / インデックス
- Google MAP API が 1日に 25,000 ビューを超えると表示される画面
- WEB フォントをクロスドメインで利用する
- ブログ更新通知先に関する情報
- さくらインターネットの CRON の設定で、標準エラー出力を postmaster に送らない
- VBScript 用 onClick 一行書き
- 『家に帰ると妻が必ず死んだふりをしています』というブログを発見しました
- Google Chrome 32.0.1700.76 のコンボボックススクロールバーがドラッグできないのは、Windows7 のエアロ系で起きるようです。
- Google Chrome 32.0.1700.76 のコンボボックススクロールバーがドラッグできない問題が、開発版(34.0.1794.5 canary) で修正されたそうです
- Google Chrome 32.0.1700.76 の具体的な問題点
- ファイル名リストをクリップボードへコピー
- キーボード説明用画像( フリーフォントでキーボード画像作成 )
- 何だこれ。Microsoft の 看板的ワードの誤字『EIblog をご覧ください。』って・・・
- 9月27日10時頃、Google Chrome でのみ AdSense の表示がおかしくなりましたが・・・
- 注意 : フィッシング詐欺メールのタイトル『【ドラゴンクエストX 目覚めし五つの種族 オンライン】認証』
- まぎらわしい『AdSenseの終了』を知らせる『日本語ページ』
- Trigger Rally(WebGL+Three.js) のコースを無視してひたすら悪路を走りまくる
- Windows 8.1 に期待は無いけれど、3D プリンタへの期待は膨らむのです
- Adobe Readerの脆弱性を突かれて人生初の『ウィルス』に感染・・・
- また４月なんで、フリーのレンタルサーバーの確認してみると・・・
