XOOPS Weblinks から Webphoto 連携時に PopBox で画像を呼ぶハック

激しく久しぶりの更新ですが、今回は手がけている XOOPS を利用したWebサイトで使ったハックを少し。

Weblinks というモジュールにはいくつかの連携機能があり、その中の一つに Webphoto モジュールを呼び出して、画像アルバムからサムネイル画像を引っ張ってきて表示できるという機能があります。

これはとても便利でいい感じなのですが、そのサムネイル画像をクリックすると Webphoto モジュール内の各画像ページに飛んでしまう仕様となっています。私の希望としては、ページ遷移なしでサムネイルをクリックすると画像が拡大するようにしたかったので、その部分を書き換えてみました。

さて、変更する箇所ですが、Weblinks では自動で PopBox という jQuery のプラグインが(Webphoto と連携させていたからか) 読み込まれていたので、以下のようにコードを修正するだけでした。

xoops_trust_path/modules/webphoto/class/inc/weblinks.php

		$ret[] = array(
			'href'        => $href ,
			'cat_href'    => $cat_href ,
			'img_attribs' => $img_attribs ,
			'title'       => $photo['title_s'] ,
			'cat_title'   => $photo['cat_title_s'] ,
			'img_src'     => $photo['img_thumb_src_s'] ,
		);

という部分を、

		$ret[] = array(
			'href'        => $href ,
			'cat_href'    => $cat_href ,
			'img_attribs' => $img_attribs ,
			'title'       => $photo['title_s'] ,
			'cat_title'   => $photo['cat_title_s'] ,
			'img_src'     => $photo['img_thumb_src_s'] ,
			'img_large_src'     => $photo['img_large_src_s'] ,
		);

として、img_large_src という変数を追加します。

次に、Weblinks のテンプレートを変更します。

xoops_root_path/modules/weblinks/templates/parts/weblinks_photo_list.html

    
     alt="<{$photo.title}>" title="<{$photo.title}>" />

となっているコードを、

 alt="<{$photo.title}>" title="<{$photo.title}>" class="PopBoxImageSmall" onclick="Pop(this,100,'PopBoxImageLarge');" pbSrcNL="<{$photo.img_large_src}>" />

として、Smarty 変数の

<{$photo.img_large_src}>

として呼んでやります。これだけで PopBox を利用した画像リンクの完成です。

こういうハックをした理由は、Webphoto を直接外部に公開せず(もちろん直でアクセスされれば見えますが)、Weblinks から呼ばれるバックエンドのアップローダー的な使い方がしたかったからなのですが、意図せず携帯から見ても、img タグで呼んでいるためリンク先には飛ぶこともなく、希望した通りの仕様となりました。

いい感じにできあがったので、忘れないように備忘録がてらメモとして。

 
余談ですが、同時進行で WordPress を使ったサイトも新規構築してたので、頭が微妙にこんがらがりつつ、WordPress の方でも知見が貯まったので、そちらも近いうちに書ければなと(そう言っておいてなかなか書いてなかったりしますが)。