ブログ カレンダー

« « 2017 11月 » »
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 1 2

カテゴリ一覧

アーカイブ

最新のエントリ

最新のコメント

最新のトラックバック

趣味のブログ - Lightbox Plus の改良その2

Lightbox Plus の改良その2

カテゴリ : 
Ajax
執筆 : 
OhYeah! 2010.09.19 16:23
 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]

トラックバック

トラックバック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+が有効にできないのです。

これが出来たらさらに活用ケースが広がる気がします^^
OhYeah!  投稿日時 2013.07.30 23:46
すみません。お昼にスマホで公開作業をしてたら、操作をミスってこのコメントの元を削除してしまいました
データベースを直接編集して復活させようと思ったら、XREA から CORESERVER に移行した際に、XREA のデータベース DUMP ファイルを CORESERVER で復元したせいか、phpMyAdmin で XOOPS のデータベースが表示できません
しょうがないので、データベース DUMP ファイルを編集してコメント群を復活させました。

引用:利用者が任意のサイズの画像をアップロードするので、
Plus & 改良2の仕様は丁度いいです。
画像のサイズがバラバラだと、本家 lightbox だと使いづらいですよね。lightbox+ はもっと評価されて良いと思います。
T.Nakamura   投稿日時 2013.07.30 09:32
お世話になります。

白枠、表示されました。
cssファイルの相対パスの指定に誤りがありました。

社内システムで利用させていただいています。

利用者が任意のサイズの画像をアップロードするので、
Plus & 改良2の仕様は丁度いいです。
何か一気にグレードが上がった感じになりました。(^_^)v

アドバイスありがとうございました。
OhYeah!  投稿日時 2013.07.29 21:14 | 最終変更
Lightbox+ は丸3年近くいじってないので、記憶が遠い彼方です
ソースを見る限り、拡大画像の白枠は 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を展開いたしまして、
首尾よく、エフェクト表示出来るようになったのですが、
サンプルのような白枠が出て来ません。
何が原因なのでしょうか。
アドバイスいただけると幸いです。

以上。よろしくお願いいたします。
OhYeah!  投稿日時 2010.09.20 22:54 | 最終変更
 Lightbox+ の lightbox.css の IE ハックが IE6 にしか対応していないため、ズームナビゲーションボックスが IE7/8 では真っ黒になっていました。このため、#overlay と #lightboxOverallView のアルファチャンネルは、CSS ではなく Javascript で指定するように変更しました。
 Lightbox+ は _setOpacity メソッドでブラウザに合わせて opacity か filter を設定するようにできているのに、何でこちらを使っていなかったんだろう?