ブログ カレンダー

« « 2024 4月 » »
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 3 4

カテゴリ一覧

アーカイブ

最新のエントリ

最新のコメント

最新のトラックバック

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

Lightbox Plus の改良

カテゴリ : 
Ajax
執筆 : 
OhYeah! 2010.09.16 22:16
 Lightbox+ は非常に気に入りましたが、どうもマウスカーソルが分かりづらい、拡大表示時に常にスクロールホイールが拡大/縮小になってしまうのがあまり好みではないってことで、自分好みに改良しました。
 改良点は以下のとおり。この記事の下に動作確認用の巨大画像を貼ってあるので、お試しください。Lightbox+ for XCL の Lightbox+ はこの変更を行ったものに差し替えました。

1. マウスカーソルを次のように変更しました。
(1) Prev/Next/Close ボタン上はポインタカーソル
(2) 通常表示画像上はデフォルトカーソル
(3) 拡大表示画像上はムーブカーソル
(4) 拡大表示時ドラッグ移動中はポインタカーソル
(5) 拡大表示時ズームナビゲーションボックス上は上下リサイズカーソル

2. 拡大表示時のスクロールホイールによる拡大/縮小をズームナビゲーションボックス上でのみ有効になるように変更しました。

3. 各種アイコンを次のように変更しました。
(1) ローディングアイコンを今風に変更
(2) Prev/next/Close を半透明アイコンに変更(IE6 以降、Firefox, Chrome, Opera)

(2010-09-19)
動作サンプルは、「Lightbox+ の改良その2」に移動しました。

トラックバック

トラックバックpingアドレス http://www.o-ya.net/modules/d3blog/tb.php/35

コメント一覧

ohno-o.v   投稿日時 2011.08.18 15:39
長い時間対応してくださってありがとうございました。
上記のサイトでの対応は見送ります。
しかし、今作りあげているサイトについては、
随分役にたっています。
OhYeah!  投稿日時 2011.08.18 02:25
引用:この場合本来で有れば、<{$xoops_module_header}>をこれに
追加すればよい?
いいえ。すでにちゃんとありますよね。
引用:<{if $xoops_module_header}><{$xoops_module_header}><{/if}>これって、$xoops_module_header がヌル文字列または 0 でなければ、$xoops_module_header の内容をこの位置に展開しなさいってことです。{if} があってもなくても同じです(正確には $zoops_module_header に 0 が代入されている場合に若干挙動が変わりますが)。

原因は、他のモジュール及びそのプリロードにあるんじゃないでしょうか。特に、静的アドレスへの変換を mod_rewrite とかじゃなくて XOOPS 側のモジュールか何かでやっているなら、そのモジュールが一番怪しそうです。
ohno-o.v   投稿日時 2011.08.16 10:54
すみません、あと一つ、
<{$xoops_module_header}>がないと
使用のテーマがかなり古いと考えられますと有りましたが
別のドメインでのホームページなんですが、

<{if $xoops_module_header}><{$xoops_module_header}><{/if}><{if $xoops_block_header}><{$xoops_block_header}><{/if}>
<script type="text/javascript"><{$xoops_js|regex_replace:"/(\/\/\-\->|<!\-\-)/":""}></script>

と成っているテーマでは言われるように表示出来ないようです
この場合本来で有れば、<{$xoops_module_header}>をこれに
追加すればよい?何か別のエラーを気にする事が出るでしょうか

このサイトは静的化を行っており<{$xoops_module_header}>の有る
テーマですらソースを見ると

<script type="text/javascript" src="log01+index.lid+34_files/lightbox.js"></script>
<link rel="stylesheet" href="log01+index.lid+34_files/lightbox.css" type="text/css" media="screen">

のような表示になります。一応、lightboxは表示したのですが
lightbox+でないのです

プリロードには余計なlightboxに関係するものは削除していますので、何が作動しているのか不明です。



ohno-o.v   投稿日時 2011.08.16 07:59
ありがとうございました
無事思い通りの結果を得ることが出来ました
イメージが統合できた事で随分データ整理が
楽になりました
OhYeah!  投稿日時 2011.08.15 21:40
インストール方法はそれで OK です。Lightbox+ for XCL は、全てのページで Lightbox+ を使えるようにするので、どのページでも良いからソースを確認し、ヘッダ部に下記の内容が追加されているかどうか確認してください。
<link rel="stylesheet" href="http://..../common/lightboxp/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://..../common/lightboxp/lightbox_plus.js"></script>

これが追加されていなければ、ご使用のテーマがかなり古いと考えられます。Theme.html の <head>~</head> の間のどこかに、下記を追加する必要があります。
<{$xoops_module_header}>
ヘッダに問題が無ければ、Lightbox+ のインストールフォルダが間違っています。ヘッダのリンク先が示すフォルダにインストールし直すか、LightboxPlusPreload.class.php の $lightboxplus に正しい値を設定してください。
ohno-o.v   投稿日時 2011.08.15 16:33
昨日はありがとうございます。
IMGTag D3 モジュールでのLightboxの作動はイメージマネージャー
の統合でPicoなどに貼りつけたものも正常に作動できるようになりました
しかし、解像度の高いものはどうしてもこのLightbox Plus の改良
したものを利用したいと考えています。
まず、ダウンロードしたcommon及びpreloadをXOOPS Cube Legacyの
インストールしたディレクトリーにいれる。Lightbox4imgtag.class.phpをpreloadのディレクトリーから削除する
念のためにコンパイル済テンプレートキャッシュをクリアにして
ホームページを閲覧したところ、Lightboxは機能していませんでした。
なにが違うのでしょうか?