ブログ カレンダー

« « 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.12 14:18
 画像のオーバーレイ表示でよく使われる Lightbox ですが、ブラウザウィンドウのクライアントエリアより画像が大きくてもオートフィッティングしてくれないのがやや難です。Highslide はウィンドウサイズに合わせて大画像をオートフィッティングしてくれますが、Highslide で表示させる HTML を書くのはとっても面倒
 Lightbox の簡単さと Highslide のオートフィッティング機能を併せ持つものがないかと探していたら、Lightbox+ なんてものがありました。
 Lightbox+ は、Lightbox をベースに、オートフィッティング機能を追加したものです。Lightbox+ で画像表示中にブラウザのウィンドウサイズを変更しても自動追従してくれます。もちろん、ピクセル等倍で表示する(あるいはピクセル等倍からオートフィットに戻す)ためのズームボタンもあります。
 さらに、ウィンドウサイズより大きい画像をスクロールバー付きで表示している際は、スクロールバーを使わなくても、画像のドラッグで表示位置を自由に変更できます。これも便利な機能ですね。

 ってことで、このサイトの画像オーバーレイ表示は全て Lightbox+ で表示するようにしました。IMGTag D3 の「アルバム」も Lightbox ではなく Lightbox+ で表示されます。「AjaXplorer のススメ」のスクリーンショットがやや大きめの画像なので機能を確認しやすいと思います。
 なお、Lightbox+ にはマウスホイールによるズーム機能がありますが、これは Off にしてあります(アニメーション機能も)。マウスホイールによるズーム機能が表示ボックス全体で有効になるのは使いづらいので、ズームナビゲータボックスの中だけでズームできるように変更しました。また、マウスポインタが感覚的に分かりづらかったので、ほぼ全面的に変更してあります。

 XOOPS Cube Legacy なら、Lightbox+ for XCL を使えば、簡単に全てのモジュールで Lightbox+ が使用できるようになります。

トラックバック

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

コメント一覧

OhYeah!  投稿日時 2011.08.13 22:53
引用:Warning: Unexpected character in input: '\' (ASCII=92) state=1警告:あらぬところに '\' なんて文字が入力されちまってますぜ。

ってことで、このサイトの code タグ展開ルーチンのバグ(が残ってたのをすっかり忘れてました^^;)が原因です。'\"' を全て '"' に置換してください。
ohno-o.v   投稿日時 2011.08.13 20:42
先日はありがとうございました

IMGTag D3 イメージマネージャー統合の設定が出来て
いなかったので

http://www.o-ya.net/modules/d3blog/details.php?bid=29
の内容で、D3imgtagTag.class.php の書き換えをしたのですが


Warning: Unexpected character in input: '\' (ASCII=92) state=1
in /var/www/vhosts
/○○/httpdocs/preload
/D3imgtagTag.class.php on line 33

Parse error: syntax error, unexpected ']', expecting
T_STRING or T_VARIABLE or T_NUM_STRING in
/var/www/vhosts/○○/httpdocs /preload
/D3imgtagTag.class.php on line 35

となりました サーバーは
VPSで、CentOS 5.5がインストール
Apacheモジュールバージョン 5.1.6が使用
PHPはCGIモードで動作しており、
バージョン 5.2.12でした。

今回別件でPHPはCGIモードで動作に起因するトラブルが
有ったのでもしやとも思っています
php.iniにあるcgi.fix_pathinfo=1をアンコメントする。?
といったキーワードを見つけたのですが
対応方法が解ってません、またほんとにそれが原因なのでしょうか?





ohno-o.v   投稿日時 2011.08.08 12:33
解りやすい説明ありがとうございました。
早速、設定をやり直します。
OhYeah!  投稿日時 2011.08.07 23:36
よく分からない場合は、基本に帰りましょう。d3imgtag-041_public なら、\html\modules\d3imgtag\ajax に lightbox が入っているので、普通にインストールすれば lightbox も自動的にインストールされます。まずは、この lightbox をきっちり使用できるように d3imgtag を設定してください。

引用:オーバーレイ表示の設定ですがAJAX機能をはいにする以外にあるのでしょうか?あわせて、XOOPS CUBE の場合、preload ディレクトリに extra 下の Lightbox4imgtag.class.php をコピーする必要があります。

さらに、XOOPS CUBE の場合、イメージマネージャ統合も extra にプリロードがあるので、imagemanagere.php を書き換える必要はありません。D3imgtagTag.class.php を preload フォルダーにコピーして、IMGTag D3 のプリファレンスで「イメージマネージャ統合」を有効にします。
ohno-o.v   投稿日時 2011.08.07 07:02
ありがとうございます。
投稿していただいた内容を読みながら、確認をしています

まず、
IMGTag D3 が生成する imgtag コードを Lightbox 対応にしたいだけですか?
とありますが、その通りです。

IMGTag D3 に同梱されている Lightbox によるオーバーレイ表示と
ありますが、d3imgtag-041_publicを利用したのですが Lightbox は同梱されていません。extraの中のpreloadにLightbox4imgtag.class.phpはありましたが。すでにモジュール内
に組み込み済みだったと言う事でしょうか?

オーバーレイ表示の設定ですがAJAX機能をはいにする以外に
あるのでしょうか?

また、XOOPS Cube 2.1.8 の上にd3imgtagをインストールしていて
Lightbox+ for XCLを導入し、AJAX機能を利用するにしている状況で、IMGTag D3 のアルバムの上ではLightbox+は機能しています


画像の統合は正常に作動していて、イメージマネージャで画像選択したときに imgtag コードは挿入され表示するのですが
Lightbox独特の表示表現が現れないと言う状況です

なにから確認すればよいか教えて頂ければ有りがたいのですが






AJAX機能
OhYeah!  投稿日時 2011.08.07 05:08
すみません。PC の広い画面で読んでも、最終的に何をしたいのかがさっぱり分かりません。IMGTag D3 が生成する imgtag コードを Lightbox 対応にしたいだけですか?

だとすると、まずは
(1) IMGTag D3 のアルバムが IMGTag D3 に同梱されている Lightbox によるオーバーレイ表示になっているか?
(2) イメージマネージャで画像選択したときに imgtag コードが挿入されるか?
を確認してください。この2点がクリアされなければ、次に進めません。XCL でない場合、設定方法を訊かれても私には答えられません。
OhYeah!  投稿日時 2011.07.31 21:17
すみません。今週一杯、出先からスマホでアクセスなので、詳しい返信ができません。
ohno-o.v   投稿日時 2011.07.31 12:57
IMGTag D3 の imgtag コードを Lightbox 対応にする方法
http://www.o-ya.net/modules/d3blog/details.php?bid=29

イメージマネージャで貼り付ける画像を選択するだけで
BBcode に変換してくれます。
まづ、上記のコメントと同じ環境を作りたいと思い

このページの内容を把握する為下記のサイトに飛ぶ

↓↓↓↓↓↓

全てのモジュールで IMGTag D3 の画像を Lightbox 表示する方法
http://www.o-ya.net//modules/d3blog/details.php?bid=28

Lightbox4imgtag.class.php は、
IMGTag D3 モジュールの時だけモジュールヘッダを出力するので、
どのモジュールでも Lightbox を使えるように
と続く、、、、

↓↓↓↓↓↓

上記ページに戻り
次に、OceanBlue さんのサイトにある「IMGTag D3 イメージマネージャー統合
」を参考にイメージマネージャ機能を有効にして、
imgtag が使用できるようになったことを確認します。

しかし、まず自分のホームページではLightboxのどのバージョンを
組み込んでいるか、このページが何に対応しているか解らないので
ダウンロードから確認できるかと
http://www.o-ya.net/modules/d3downloads/へ移動


そこでLightbox+ for XCLをダウンロードして、説明である
変更内容と動作サンプルは、下記をご覧ください。
http://www.o-ya.net/modules/d3blog/details.php?bid=36
へ移動

↓↓↓↓↓↓

内容を確認後ダウンロードしたファイルを解凍すると
LightboxPlusPreload.class.phpがあり、これが上記の
Lightbox4imgtag.class.phpと違い編集出来ない
これは、 Lightboxの内容から Lightbox+にいつの間にか
検索する方向を間違った為でしょう。

↓↓↓↓↓↓

ブログ内を検索していると
Lightbox Plus っていいですね
http://www.o-ya.net/modules/d3blog/details.php?bid=33
このページの下部に
XOOPS Cube Legacy なら、Lightbox+ for XCL を使えば、
簡単に全てのモジュールで Lightbox+ が使用できるようになります。

とあります、では全てのモジュールで IMGTag D3 の画像を Lightbox 表示する方法に
ついては対応しなくてもよい?

Picoにイメージマネージャで貼り付ける画像を選択してみたけど
Lightbox+が作動しない
自サイトで行った事
xoops_url/imagemanager.phpを編集で、
このサイトの場合Ver2.1系の為
require_once "mainfile.php";
require_once "modules/d3imgtag/imagemanager.php"; // この行追加
require_once XOOPS_ROOT_PATH . "/header.php";
として保存

↓↓↓↓↓↓
なにか他に掲載がないかと探し下記のページを見つけましたが
http://www.o-ya.net/modules/d3downloads/index.php?page=singlefile&cid=6&lid=1


3. その他
 IMGTag D3 で Lightbox のプリロードを使用している方は、
{XOOPS_ROOT_PATH}/preload/Lightbox4imgtag.class.php を削除してください。
とありますが、Lightbox4imgtag.class.phpはインストールされてないので問題なし

結局、どうすればよいのでしょう?

OhYeah!  投稿日時 2010.09.12 20:09
Lightbox+ の XCL 用プリロードは、他のことをやっているついでに作っちゃったんですが、自分で作らなくても下記にありましたね
http://www.photositelinks.com/modules/mydownloads/singlefile.php?cid=2&lid=4