indexhibit_V2カスタマイズその2

Horizontal formatにjQuery colorboxを付けるには

標準のHorizontal formatだと管理画面上でテキストボックス部分にタグを書く以外に
画像リンク等をする方法がないため
format.horizontal.phpとthemeフォルダ内のindex.phpを修正する必要がある。

ndxzsite/themeフォルダ内/index.phpに呼び出し行追加

index.phpのhead内のJS呼び出し部分(10-11行目辺り)

<last:page:javascript />

があり、ここでjQueryなどを呼び出してると考えられるのでこの後に

<script type="text/javascript" src="{{baseurl}}/ndxzsite/js/jquery.colorbox-min.js"></script>

<script>
$(document).ready(function(){
	$("#img-container a").colorbox({ maxWidth:"100%" , maxHeight:"100%"});
});
</script>

を記述。
また同様にjQuery colorboxのcssファイルを9行目付近に挿入

<link rel="stylesheet" href="{{baseurl}}/ndxzsite/js/colorbox.css" type="text/css" />

jquery.colorbox.jsを書き換えるのが面倒なのでJSフォルダ内にjquery.colorbox.jsが参照するcolorbox.cssとimagesフォルダを置いた。

本当はformat.horizontal.php内（143行目付近)に

function createExhibit()
{
	$OBJ =& get_instance();
	global $default;

とあり、この後に

$OBJ->page->add_jquery('hogehoge.js', 30);

などと入れるべきなのだけど、外部ファイルにする以外にjavascriptの記述方法がよくわからなかったのでひとまず楽な方でやった。
('hogehoge.js', 30);の 30の意味もよくわからない。indexの30行目に突っ込むとかそういう意味じゃないかと思ってるが。

ndxzsite/plugin/format.horizontal.phpに画像リンクを挿入

$b .= "<div " . $this->valign($size[1]) . ">\n";
$b .= "<img src='" . BASEURL . $the_file . "' width='$size[0]' height='$size[1]' alt='$go[media_thumb_path]' />";
$b .= "</div>\n";

290行目、360行目付近のimgタグをaタグで囲った。

$b .= "<div " . $this->valign($size[1]) . ">\n";
$b .= "<a class='colorbox' rel='photo' href ='" . BASEURL . "/files/gimgs/$go[media_file]' >\n";
$b .= "<img src='" . BASEURL . $the_file . "' width='$size[0]' height='$size[1]' alt='$go[media_thumb_path]' />";
$b .= "</a>\n";
$b .= "</div>\n";

あまりわかってないがとりあえずこれで動いたのでよしとする。

リンク先の画像はアップロード時の元画像を指定。

/files/gimgs/内に元画像がアップされるみたいなので、php内のそれっぽい文字列を拾ってコピペした。

class='colorbox' rel='photo'はcolorboxでグループ化してスライド表示するために付けた。
グループ化の必要がなけばid=img-container内のaタグを指定するだけでもできた。