ブログ カレンダー

« « 2024 10月 » »
29 30 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 31 1 2

カテゴリ一覧

アーカイブ

最新のエントリ

最新のコメント

最新のトラックバック

趣味のブログ - IMGTag D3 の imgtag コードを Lightbox 対応にする方法

IMGTag D3 の imgtag コードを Lightbox 対応にする方法

カテゴリ : 
XOOPS
執筆 : 
OhYeah! 2010.09.05 01:32
 IMGTag D3 は、イメージマネージャを IMGTag D3 に統合でき、XCL なら BBcode として imgtag が使用可能になります(imgtag を使う設定にすれば)。イメージマネージャ統合を有効にしておくと、コンテンツへの画像貼り付けがとっても楽チンです。イメージマネージャで貼り付ける画像を選択するだけで BBcode に変換してくれます。
 が、imgtag コードも Lightbox 表示に対応していません。ってことで、imgtag を Lightbox 表示対応にしてみました。日記の「予察灯(ライトトラップ)」は imgtag で画像を貼り付けています。サムネイル画像をクリックしてみてください。
 imgtag コードを Lightbox 対応にする方法ですが、まずは「全てのモジュールで IMGTag D3 の画像を Lightbox 表示する方法」を参考に他のモジュールでも IMGTag の画像を Lightbox 表示可能な状態にします。
 次に、OceanBlue さんのサイトにある「IMGTag D3 イメージマネージャー統合」を参考にイメージマネージャ機能を有効にして、imgtag が使用できるようになったことを確認します。

 最後に、D3imgtagTag.class.php の
		$modname = 'd3imgtag';		// Set your module name

		// [imgtag] BBCode for d3imgtag
		$patterns[] = \"/\[imgtag]([0-9]*)\[\/imgtag\]/sU\";
		$replacements[0][] = $replacements[1][] = '<a href=\"'.XOOPS_URL.'/modules/'.$modname.'/index.php?page=image&id=\\1&sz=2\" target=blank><img src=\"'.XOOPS_URL.'/modules/'.$modname.'/index.php?page=image&id=\\1&sz=0\" alt=\"\" /></a>';
		$patterns[] = \"/\&#91;imgtag title=(['\\"]?)([a-zA-Z0-9]*)\\1]([0-9]*)\[\/imgtag\]/sU\";
		$replacements[0][] = $replacements[1][] = '<a href=\"'.XOOPS_URL.'/modules/'.$modname.'/index.php?page=image&id=\\3&sz=2\" title=\"\\2\" alt=\"\\2\" target=blank><img src=\"'.XOOPS_URL.'/modules/'.$modname.'/index.php?page=image&id=\\3&sz=0\" alt=\"\\2\" title=\"\\2\" /></a>';
		$patterns[] = \"/\&#91;imgtag align=(['\\"]?)(left|center|right)\\1]([0-9]*)\[\/imgtag\]/sU\";
		$replacements[0][] = $replacements[1][] = '<a href=\"'.XOOPS_URL.'/modules/'.$modname.'/index.php?page=image&id=\\3&sz=2\" target=blank><img src=\"'.XOOPS_URL.'/modules/'.$modname.'/index.php?page=image&id=\\3&sz=0\" align=\"\\2\" alt=\"\" /></a>';
		$patterns[] = \"/\&#91;imgtag align=(['\\"]?)(left|center|right)\\1 title=(['\\"]?)([ a-zA-Z0-9]*)\\3]([0-9]*)\[\/imgtag\]/sU\";
		$replacements[0][] = $replacements[1][] = '<a href=\"'.XOOPS_URL.'/modules/'.$modname.'/index.php?page=image&id=\\5&sz=2\" title=\"\\4\" alt=\"\\4\" target=blank><img src=\"'.XOOPS_URL.'/modules/'.$modname.'/index.php?page=image&id=\\5&sz=0\" align=\"\\2\" title=\"\\4\" alt=\"\\4\" /></a>';
		$patterns[] = \"/\&#91;imgtag title=(['\\"]?)([a-zA-Z0-9]*)\\1 align=(['\\"]?)(left|center|right)\\3]([0-9]*)\[\/imgtag\]/sU\";
		$replacements[0][] = $replacements[1][] = '<a href=\"'.XOOPS_URL.'/modules/'.$modname.'/index.php?page=image&id=\\5&sz=2\" title=\"\\2\" alt=\"\\2\" target=blank><img src=\"'.XOOPS_URL.'/modules/'.$modname.'/index.php?page=image&id=\\5&sz=0\" align=\"\\4\" title=\"\\2\" alt=\"\\2\" /></a>';
		$patterns[] = \"/\&#91;imgtag_b]([0-9]*)\[\/imgtag_b\]/sU\";
		$replacements[0][] = $replacements[1][] = '<img src=\"'.XOOPS_URL.'/modules/'.$modname.'/index.php?page=image&id=\\1&sz=2\" alt=\"\" /></a>';
		$patterns[] = \"/\&#91;imgtag_b align=(['\\"]?)(left|center|right)\\1]([0-9]*)\[\/imgtag_b\]/sU\";
		$replacements[0][] = $replacements[1][] = '<img src=\"'.XOOPS_URL.'/modules/'.$modname.'/index.php?page=image&id=\\3&sz=2\" align=\"\\2\" alt=\"\" /></a>';
を下記のように書き換えれば OK です。AJAX 機能を使用しない設定の場合は、オリジナル同様に別窓(別タブ)に画像を表示するようにしてあります(動作確認はしていませんが)。
		$modname = 'd3imgtag';		// Set your module name

		$module_handler =& xoops_gethandler('module');
		$module =& $module_handler->getByDirname($modname);
		$config_handler =& xoops_gethandler('config');
		$config = $config_handler->getConfigsByCat(0, $module->getVar('mid'));
		if ( isset($config['d3imgtag_enableajax']) ) {
			$target = 'rel=\"lightbox\"';
		} else {
			$target = 'target=\"blank\"';
		}

		// &#91;imgtag] BBCode for d3imgtag
		$patterns[] = \"/\&#91;imgtag\]([0-9]*)\[\/imgtag\]/sU\";
		$replacements[0][] = $replacements[1][] = '<a href=\"'.XOOPS_URL.'/modules/'.$modname.'/index.php?page=image&id=\\1&sz=2\" '.$target.'><img src=\"'.XOOPS_URL.'/modules/'.$modname.'/index.php?page=image&id=\\1&sz=0\" alt=\"\" /></a>';
		$patterns[] = \"/\&#91;imgtag title=([^ \]]*)\]([0-9]*)\[\/imgtag\]/sU\";
		$replacements[0][] = $replacements[1][] = '<a href=\"'.XOOPS_URL.'/modules/'.$modname.'/index.php?page=image&id=\\2&sz=2\" title=\"\\1\" alt=\"\\1\" '.$target.'><img src=\"'.XOOPS_URL.'/modules/'.$modname.'/index.php?page=image&id=\\2&sz=0\" alt=\"\\1\" title=\"\\1\" /></a>';
		$patterns[] = \"/\&#91;imgtag align=(left|center|right)\]([0-9]*)\[\/imgtag\]/sU\";
		$replacements[0][] = $replacements[1][] = '<a href=\"'.XOOPS_URL.'/modules/'.$modname.'/index.php?page=image&id=\\2&sz=2\" '.$target.'><img src=\"'.XOOPS_URL.'/modules/'.$modname.'/index.php?page=image&id=\\2&sz=0\" align=\"\\1\" alt=\"\" /></a>';
		$patterns[] = \"/\&#91;imgtag align=(left|center|right) title=([^\]]*)\]([0-9]*)\[\/imgtag\]/sU\";
		$replacements[0][] = $replacements[1][] = '<a href=\"'.XOOPS_URL.'/modules/'.$modname.'/index.php?page=image&id=\\3&sz=2\" title=\"\\2\" alt=\"\\2\" '.$target.'><img src=\"'.XOOPS_URL.'/modules/'.$modname.'/index.php?page=image&id=\\3&sz=0\" align=\"\\1\" title=\"\\2\" alt=\"\\2\" /></a>';
		$patterns[] = \"/\&#91;imgtag title=([^ ]*) align=(left|center|right)\]([0-9]*)\[\/imgtag\]/sU\";
		$replacements[0][] = $replacements[1][] = '<a href=\"'.XOOPS_URL.'/modules/'.$modname.'/index.php?page=image&id=\\3&sz=2\" title=\"\\1\" alt=\"\\1\" '.$target.'><img src=\"'.XOOPS_URL.'/modules/'.$modname.'/index.php?page=image&id=\\3&sz=0\" align=\"\\2\" title=\"\\1\" alt=\"\\1\" /></a>';
		$patterns[] = \"/\&#91;imgtag_b\]([0-9]*)\[\/imgtag_b\]/sU\";
		$replacements[0][] = $replacements[1][] = '<img src=\"'.XOOPS_URL.'/modules/'.$modname.'/index.php?page=image&id=\\1&sz=1\" alt=\"\" />';
		$patterns[] = \"/\&#91;imgtag_b title=([^ \]]*)\]([0-9]*)\[\/imgtag_b\]/sU\";
		$replacements[0][] = $replacements[1][] = '<img src=\"'.XOOPS_URL.'/modules/'.$modname.'/index.php?page=image&id=\\2&sz=1\" alt=\"\\1\" title=\"\\1\" />';
		$patterns[] = \"/\&#91;imgtag_b align=(left|center|right)\]([0-9]*)\[\/imgtag_b\]/sU\";
		$replacements[0][] = $replacements[1][] = '<img src=\"'.XOOPS_URL.'/modules/'.$modname.'/index.php?page=image&id=\\2&sz=1\" align=\"\\1\" alt=\"\" />';
		$patterns[] = \"/\&#91;imgtag_b align=(left|center|right) title=([^\]]*)\]([0-9]*)\[\/imgtag_b\]/sU\";
		$replacements[0][] = $replacements[1][] = '<img src=\"'.XOOPS_URL.'/modules/'.$modname.'/index.php?page=image&id=\\3&sz=1\" align=\"\\1\" title=\"\\2\" alt=\"\\2\" />';
		$patterns[] = \"/\&#91;imgtag_b title=([^ ]*) align=(left|center|right)\]([0-9]*)\[\/imgtag_b\]/sU\";
		$replacements[0][] = $replacements[1][] = '<img src=\"'.XOOPS_URL.'/modules/'.$modname.'/index.php?page=image&id=\\3&sz=1\" align=\"\\2\" title=\"\\1\" alt=\"\\1\" />';

		// &#91;br] BBCode for d3imgtag
		$patterns[] = \"/\&#91;br\]\[\/br\]/sU\";
		$replacements[0][] = $replacements[1][] = '<br />';
		$patterns[] = \"/\&#91;br\](left|right|all|none)\[\/br\]/sU\";
		$replacements[0][] = $replacements[1][] = '<br clear=\"\\1\"/>';

(2010.9.5 17:30 変更)
  1. XOOPS 標準エディタでは属性をクォートで括ると正常に動作しないため、クォート処理部分は削除しました。
  2. title 属性で日本語を使用可能にしました。
  3. [imgtag_b] 処理が未完成だったので、[imgtag] と同様に使用できるようにしました。
  4. [imgtag_b] はオリジナル画像をコンテンツにそのまま貼り付ける仕様でしたが、オリジナル画像が大きい場合に問題が出そうなので、プレビュー画像を貼り付けるように変更しました。
  5. align=left|right で画像の周りに文字が回り込むようにした場合、BBcode と HTML タグの併用ができないモジュールでレイアウトが崩れるため、文字の回り込みを解除する [br] コードを追加しました。

 これで、imgtag で貼り付けた画像も Lightbox で表示されます。
 が、d3blog は imgtag に対応していないので、「全てのモジュールで IMGTag D3 の画像を Lightbox 表示する方法」の最後に書いた HTML タグを使用する必要があります。これでは不便なので、そのうち d3blog をハックしようと考えています。
 また、d3diary は BBcode と HTML タグの併用ができないので、imgtag と説明文を <div> で括ることができず、「予察灯(ライトトラップ)」のようなレイアウトができません。このような場合に、
&#91;imgtag align=left]ID[/imgtag]説明文&#91;br]left[/br]
と最後に [br] コードを記述すると、回り込みが解除されます。

トラックバック

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

コメント一覧