Gallery/Image Popup

[ トップ ] [ 編集 | 凍結 | 差分 | バックアップ | 添付 ] [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

Image Popup（画像をポップアップさせる †

優先度／需要: 低
状態: 継続
カテゴリー: 便利
投稿日: 2006-02-24 (金) 14:34:19

↑

メッセージ †

画像をポップアップさせる

Image Popup（画像をポップアップさせる
- メッセージ
案1　lightbox_plus.jsを弄ったもの使ってポップアップさせる

↑

案1　lightbox_plus.jsを弄ったもの使ってポップアップさせる †

概要

画像へのリンクをクリックすると画面中央にポップアップする
- 画面に合わせて画像の大きさが自動調節される
  - 元々の大きさにすることも可能
  - ホイールスクロールで拡大縮小可能
- 読込成功だと背景が黒に、失敗だと背景がオレンジになる（追加機能）
  - 読み込み失敗だと画像が「ERROR NotFound or NotImage」になる（追加機能）
- 戻る/進むボタンを押すと、次の画像が表示される
  - 同じURLの画像は一度しか表示されない　が、タイトルは全て一つになって表示される（追加機能）
- 画像の下のキャプションに 1/20 のような物を追加（追加機能）
  - 画像の下のキャプションをダブルクリックすると、一気に移動可能（追加機能）
  - 画像の読み込みに失敗した場合、画像の下のキャプションにURL (target=_blank) を追加（追加機能）
target=_blankでも動作する

問題点

複数同時には処理できない
そのページが読み込み終わるまでは動作しない
Shiftを押しながら開いても新窓で開かれなくなる
Opera9.01だと、GIFは何時までも読み込み中になり表示されない
IE6/7だと、GIFを一度表示したら、他の画像に変えてもそのGIFに勝手に変わる
画像が小さいと、戻る/進むボタンが押しづらい
- 画像が1x1並に小さいと、戻る/進むボタンが殆ど表示出来ない

導入

以下のフィルタをぶち込む

[Patterns]
Name = "ImagePopup lightbox_plus.js (1/2)"
Active = TRUE
URL = "(^[^/]++.(wikipedia.org|nicovideo.jp)/)$TYPE(htm)"
Limit = 256
Match = "(^(^</head>|<body))$STOP()"
Replace = "<link type="text/css" rel="stylesheet" href="http://local.ptron/lightbox_plus/lightbox.css" />\r\n"
"<script type="text/javascript" src="http://local.ptron/lightbox_plus/spica.js"></script>\r\n"
"<script type="text/javascript" src="http://local.ptron/lightbox_plus/lightbox_plus.js" charset="UTF-8"></script>\r\n"

Name = "ImagePopup lightbox_plus.js (2/2)"
Active = TRUE
URL = "$TYPE(htm)(^[^/]++.wikipedia.org/)"
Limit = 1024
Match = "<a\s[^>]++href=$AV([^?#]++.(jpeg|jp[eg]|gif|png|bmp|ico|j2k)([?#]*|))&&\0"
Replace = "\0 rel="lightbox1" "

「Proxomitronが有るフォルダ/html/lightbox_plus/」に、Lightbox Plusのファイル（リソース）を全てDL
lightbox_plus.js[ver. 20061027]を弄ったもの(lightbox_plus.js[2008/12/13更新])、lightbox.css[ver. 20061027]を弄ったもの(lightbox.css[2008/12/13更新])、error.gifも同じ場所にDL（上書き保存）

テスト用リンク: ロゴ favicon 404 1 404 2
同一URLの画像

2008/12/13更新　IE7, Firefox3.0.4, Opera9.62, Safari3.1.2 で動作確認　古いブラウザで動くかは知らん -- 名無しさん 2008-12-13 (土) 21:05:21
更新してくれて凄くありがたいがIE6で使ってみたら動かない。他の人もそうなのかな？ -- 名無しさん 2009-01-31 (土) 05:23:30
IE6.0.2900.2180で動きますね -- 名無しさん 2009-02-02 (月) 01:19:13
このフィルタを使用すると、正常に動作しなくなるサイトが多い（Lastfmなど）ので注意してください。。 -- 名無しさん 2009-07-17 (金) 23:50:28

添付ファイル:

lightbox.css 685件 [詳細]

lightbox_plus.js 691件 [詳細]

error.gif 1223件 [詳細]

Image Popup（画像をポップアップさせる †

メッセージ †

案1 lightbox_plus.jsを弄ったもの使ってポップアップさせる †

案1　lightbox_plus.jsを弄ったもの使ってポップアップさせる †