ブログ カレンダー

« « 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

カテゴリ一覧

アーカイブ

最新のエントリ

最新のコメント

最新のトラックバック

趣味のブログ - 全てのモジュールで IMGTag D3 の画像を Lightbox 表示する方法

全てのモジュールで IMGTag D3 の画像を Lightbox 表示する方法

カテゴリ : 
XOOPS
執筆 : 
OhYeah! 2010.09.04 22:52
 このサイトのアルバムは IMGTag D3 を使用していて、IMGTag D3 には画像を Lightbox で表示する機能があります。が、残念ながら IMGTag D3 モジュールの中だけで、他のモジュールから IMGTag D3 の画像を参照した場合には、Lightbox での表示はできません。
 ってことで、他のモジュールからでも Lightbox 表示できるようにしてみました。ブログの「AjaXplorer のススメ」と日記の「その後のハスモンヨトウ」にあるサムネイル画像をクリックしてみてください。
 具体的な方法ですが、まず OceanBlue さんのサイトにある「AJAX機能の使い方(2) XCLの場合」を参考に AJAX 機能を有効にして、Lightbox 表示が可能になったことを確認します。

 次に、Lightbox4imgtag.class.php は、IMGTag D3 モジュールの時だけモジュールヘッダを出力するので、どのモジュールでも Lightbox を使えるように
		if ($mod == $modname) {
			$module_handler =& xoops_gethandler('module');
			$module =& $module_handler->getByDirname($modname);
			$config_handler =& xoops_gethandler('config');
			$config = $config_handler->getConfigsByCat(0, $module->getVar('mid'));

			$xoopsTpl->assign('d3imgtag_ajaxeffect', $config['d3imgtag_ajaxeffect']);
			$xoopsTpl->assign("xoops_modname", $modname);
		} else {
			$xoopsTpl->assign("xoops_modname", '');
		}
の if 文と else 節以降を下記のようにコメントアウトします。
//		if ($mod == $modname) {
			$module_handler =& xoops_gethandler('module');
			$module =& $module_handler->getByDirname($modname);
			$config_handler =& xoops_gethandler('config');
			$config = $config_handler->getConfigsByCat(0, $module->getVar('mid'));

			$xoopsTpl->assign('d3imgtag_ajaxeffect', $config['d3imgtag_ajaxeffect']);
			$xoopsTpl->assign("xoops_modname", $modname);
//		} else {
//			$xoopsTpl->assign("xoops_modname", '');
//		}


 一応これで他のモジュールでも Lightbox 表示が可能になりますが、これだけだとクローズボタンが表示されません。クローズボタンを表示するためには、HTML 側の IMGTag D3 インストールディレクトリ下の images にある loading.gif, loading2.gif, closelabel.gif, close2.gif の4つの画像ファイルを {XOOPS_ROOT_PATH}/images 等にコピーし、lightbox.js の
var fileLoadingImage = "images/loading?.gif";		
var fileBottomNavCloseImage = "images/close?.gif";
を絶対パスに書き換えます。
 私は、{XOOPS_ROOT_PATH}/images/lightbox というディレクトリを作成し、そこに画像ファイルをコピーしました。IMGTag D3 の設定で「AJAX機能レベル」を「full」にしてあるので、ajax/full/lightbox.js を下記のように書き換えています。
var fileLoadingImage = "/images/lightbox/loading.gif";		
var fileBottomNavCloseImage = "/images/lightbox/closelabel.gif";

 「AJAX機能レベル」が「Minimal」の場合は、ajax/med/lightbox.js を下記のように書き換えます。
var loadingImage = '/images/lightbox/loading2.gif';		
var closeButton = '/images/light/box/close2.gif';


 ここまでできたら、あとはコンテンツの HTML を有効にして、下記のようなタグを書けば OK です。{IMGTAG} は IMGTag のインストールディレクトリ、{ID} は画像の ID 番号、{TITLE} は画像のタイトルに書き直してください。
<a href="/modules/{IMGTAG}/index.php?page=image&id={ID}&sz=2" rel="lightbox" title="{TITLE}"><img src="/modules/{IMGTAG}/index.php?page=image&id={ID}&sz=0" alt="{TITLE}" /></a>

トラックバック

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

コメント一覧