趣味のブログ - Lightbox Plus の改良その２
Lightbox+ はオリジナル Lightbox と違って、拡大画像をいきなりピクセル等倍で表示しないで、ブラウザのウィンドウサイズにオートフィットしてくれるところが非常に優れています。が、「Lightbox Plus の改良」で書いたように、マウスカーソルが分かりづらいなど操作上の使いにくさがいくつかあります。
てなわけで、今回はズームナビゲーションボックスを中心にさらに改良しました。
てなわけで、今回はズームナビゲーションボックスを中心にさらに改良しました。
前回、今回を通じての改良点は以下のとおり。この記事の下に動作確認用の巨大画像を貼ってあるので、お試しください。Lightbox+ for XCL の Lightbox+ はこの変更を行ったものに差し替えました。XOOPS Cube Legacy を使用していなくても、Lightbox+ for XCL の /html/common/lightboxp 下のファイルをサーバにコピーすれば、Lightbox2 の代わりに使用できます。
なお、前回のマウスカーソルの変更で、拡大表示時に次の画像に移ったり、ダブルクリックで終了したりすると次の画像表示時にマウスカーソルが移動カーソルになったままになるというバグがありましたが、これも修正してあります。
1. マウスカーソルを次のように変更しました。
(1) Prev/Next/Close ボタン上はポインタカーソル
(2) 通常表示画像上はデフォルトカーソル
(3) 拡大表示画像上はムーブカーソル
(4) 拡大表示時ドラッグ移動中はポインタカーソル
(5) 拡大表示時ズームナビゲーションボックス上は上下リサイズカーソル
2. 拡大表示時のズームナビゲーションボックスを次のように変更しました。
(1) スクロールホイールによる拡大／縮小をズームナビゲーションボックス上でのみ有効化
(2) ズームナビゲーションボックスのクリックでピクセル等倍表示
(3) 現在の拡大率の表示
3. 各種アイコンを次のように変更しました。
(1) ローディングアイコンを今風に変更
(2) Prev/next/Close を半透明アイコンに変更(IE6 以降、Firefox, Chrome, Opera)
[imgtag id=23]ハナアブ[/imgtag] [imgtag id=24]キイロトラカミキリ[/imgtag] [imgtag id=25]アキアカネ[/imgtag] [imgtag id=26]？バッタ[/imgtag]
なお、前回のマウスカーソルの変更で、拡大表示時に次の画像に移ったり、ダブルクリックで終了したりすると次の画像表示時にマウスカーソルが移動カーソルになったままになるというバグがありましたが、これも修正してあります。
1. マウスカーソルを次のように変更しました。
(1) Prev/Next/Close ボタン上はポインタカーソル
(2) 通常表示画像上はデフォルトカーソル
(3) 拡大表示画像上はムーブカーソル
(4) 拡大表示時ドラッグ移動中はポインタカーソル
(5) 拡大表示時ズームナビゲーションボックス上は上下リサイズカーソル
2. 拡大表示時のズームナビゲーションボックスを次のように変更しました。
(1) スクロールホイールによる拡大／縮小をズームナビゲーションボックス上でのみ有効化
(2) ズームナビゲーションボックスのクリックでピクセル等倍表示
(3) 現在の拡大率の表示
3. 各種アイコンを次のように変更しました。
(1) ローディングアイコンを今風に変更
(2) Prev/next/Close を半透明アイコンに変更(IE6 以降、Firefox, Chrome, Opera)
[imgtag id=23]ハナアブ[/imgtag] [imgtag id=24]キイロトラカミキリ[/imgtag] [imgtag id=25]アキアカネ[/imgtag] [imgtag id=26]？バッタ[/imgtag]
トラックバック
トラックバックpingアドレス http://www.o-ya.net/modules/d3blog/tb.php/36
コメント一覧
ゲスト
投稿日時 2013.09.05 17:09
こんにちは。
LightBox+を改良したとのことで素晴らしいと思います。
UIも洗練された感じを受けました＾＾
ただ、LightBox+でひとつ切望している機能があります。
それは、任意のタイミングでDOMを再走査してくれるメソッド、
Spica.Event.refreshみたいなのがあれば開発者からはとても便利でだと思います。
LB+はドキュメントロードのタイミングでDOMから画像タグを走査して初期化してくれますが、これをJSから任意タイミングで呼び出すやり方がわからないので、例えばなんらかの操作で新たなIMGタグをDOMに追加したときや、更新したときに、そのIMGタグにはLB+が有効にできないのです。
これが出来たらさらに活用ケースが広がる気がします＾＾
LightBox+を改良したとのことで素晴らしいと思います。
UIも洗練された感じを受けました＾＾
ただ、LightBox+でひとつ切望している機能があります。
それは、任意のタイミングでDOMを再走査してくれるメソッド、
Spica.Event.refreshみたいなのがあれば開発者からはとても便利でだと思います。
LB+はドキュメントロードのタイミングでDOMから画像タグを走査して初期化してくれますが、これをJSから任意タイミングで呼び出すやり方がわからないので、例えばなんらかの操作で新たなIMGタグをDOMに追加したときや、更新したときに、そのIMGタグにはLB+が有効にできないのです。
これが出来たらさらに活用ケースが広がる気がします＾＾
OhYeah!
投稿日時 2013.07.30 23:46
すみません。お昼にスマホで公開作業をしてたら、操作をミスってこのコメントの元を削除してしまいました
データベースを直接編集して復活させようと思ったら、XREA から CORESERVER に移行した際に、XREA のデータベース DUMP ファイルを CORESERVER で復元したせいか、phpMyAdmin で XOOPS のデータベースが表示できません
しょうがないので、データベース DUMP ファイルを編集してコメント群を復活させました。
引用：利用者が任意のサイズの画像をアップロードするので、
Plus & 改良２の仕様は丁度いいです。画像のサイズがバラバラだと、本家 lightbox だと使いづらいですよね。lightbox+ はもっと評価されて良いと思います。
データベースを直接編集して復活させようと思ったら、XREA から CORESERVER に移行した際に、XREA のデータベース DUMP ファイルを CORESERVER で復元したせいか、phpMyAdmin で XOOPS のデータベースが表示できません
しょうがないので、データベース DUMP ファイルを編集してコメント群を復活させました。
引用：利用者が任意のサイズの画像をアップロードするので、
Plus & 改良２の仕様は丁度いいです。画像のサイズがバラバラだと、本家 lightbox だと使いづらいですよね。lightbox+ はもっと評価されて良いと思います。
T.Nakamura
投稿日時 2013.07.30 09:32
お世話になります。
白枠、表示されました。
cssファイルの相対パスの指定に誤りがありました。
社内システムで利用させていただいています。
利用者が任意のサイズの画像をアップロードするので、
Plus & 改良２の仕様は丁度いいです。
何か一気にグレードが上がった感じになりました。(^_^)v
アドバイスありがとうございました。
白枠、表示されました。
cssファイルの相対パスの指定に誤りがありました。
社内システムで利用させていただいています。
利用者が任意のサイズの画像をアップロードするので、
Plus & 改良２の仕様は丁度いいです。
何か一気にグレードが上がった感じになりました。(^_^)v
アドバイスありがとうございました。
OhYeah!
投稿日時 2013.07.29 21:14 | 最終変更
Lightbox+ は丸３年近くいじってないので、記憶が遠い彼方です
ソースを見る限り、拡大画像の白枠は lightbox.css の中で指定しているので、lightbox.css がちゃんと読み込まれていないのが原因だと思われます。まずは、lightbox+ で画像を表示する元の画面のソースに、下記のタグが入っているかどうかを確認してください。これがあれば、次は lightbox.css が指定した場所にあるかどうかの確認になります。
ソースを見る限り、拡大画像の白枠は lightbox.css の中で指定しているので、lightbox.css がちゃんと読み込まれていないのが原因だと思われます。まずは、lightbox+ で画像を表示する元の画面のソースに、下記のタグが入っているかどうかを確認してください。これがあれば、次は lightbox.css が指定した場所にあるかどうかの確認になります。
<link rel="stylesheet" href="http://....../common/lightboxp/lightbox.css" type="text/css" media="screen" />
T.nakamura
投稿日時 2013.07.29 14:16
こんにちは。
lightboxplus4xcl_05を展開いたしまして、
首尾よく、エフェクト表示出来るようになったのですが、
サンプルのような白枠が出て来ません。
何が原因なのでしょうか。
アドバイスいただけると幸いです。
以上。よろしくお願いいたします。
lightboxplus4xcl_05を展開いたしまして、
首尾よく、エフェクト表示出来るようになったのですが、
サンプルのような白枠が出て来ません。
何が原因なのでしょうか。
アドバイスいただけると幸いです。
以上。よろしくお願いいたします。
OhYeah!
投稿日時 2010.09.20 22:54 | 最終変更
Lightbox+ の lightbox.css の IE ハックが IE6 にしか対応していないため、ズームナビゲーションボックスが IE7/8 では真っ黒になっていました。このため、#overlay と #lightboxOverallView のアルファチャンネルは、CSS ではなく Javascript で指定するように変更しました。
Lightbox+ は _setOpacity メソッドでブラウザに合わせて opacity か filter を設定するようにできているのに、何でこちらを使っていなかったんだろう？
Lightbox+ は _setOpacity メソッドでブラウザに合わせて opacity か filter を設定するようにできているのに、何でこちらを使っていなかったんだろう？
6件表示
(全6件)
すべてのコメント一覧へ