Indexhibit_V2カスタマイズその3-2

前回のエントリの続き

http://log.hatenadiary.com/entry/2013/10/18/190224

が何をやってるかを調べる

jQuery.ScrollTo参考

jQuery.LocalScroll参考

まずはHTMLのサンプル改造してやってみてるけど、横移動がうまくいってない。
どうも参考元のsyndexは多少プラグインいじってるみたいだから、勉強がてら別のプラグインで似たようなことやるのを目指すかも。

$(document).ready(function(){
$("div.hoge").each(function(index, elem) {$(elem).attr("id", "hage"+(index+1)); });
});

http://okwave.jp/qa/q5532168.htmlより
div class="hoge"　に対して連番id="hage番号"を振るのはこれでいけるっぽい。

読んでる本

Webデザイナーのための jQuery入門　魅力的なユーザーインターフェースを手軽に作る (Books for Web Creative)

Webデザイナーのための jQuery入門　魅力的なユーザーインターフェースを手軽に作る (Books for Web Creative)


サンプルコード
http://image.gihyo.co.jp/assets/files/book/2012/978-4-7741-4856-4/
Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)


サンプルコード
http://go.ascii.jp/?jquery_sample

改訂版はこっち

Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)

Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)

Indexhibit2の紹介

紹介

Theme(skin)配布元

動画





indexhibit_V2カスタマイズその３

スムーススクロールを導入するためのメモ

まずは連番id間のスクロール、最終的にはTumblrのテーマである syndex（http://syndex.me/）
のような動きを実現したい。

syndexのソースを覗いてみるとplugins.jsがあって
中身は

みたいなので上2つを使えばとりあえずスクロールはできそう。


課題

idの連番作成

plugin.jsの中身はちゃんと確認できてないけれども
ページ内リンクでスクロールさせる場合div idなどに連番をつける必要があると思う。
php側で自動で連番付けるのが理想だが、自分には敷居が高いのでJSで同一クラスにidとナンバリング挿入するスクリプトでできそう。

追記

http://webdesignerwall.com/tutorials/scrollto-posts-with-jquery
この辺りの作例見るとクラス指定するだけで特に連番id作ってるわけではなさそうなので、この処理は必要ない気がする。

クリックごとに、画像切替＆下層レイヤーのサムネール位置へとスクロール

サムネール画像をクリックするとモーダルウインドウでオーバーレイ表示され、
クリックごとに、画像切替＆下層レイヤー上のサムネール位置へのスクロールされる。

lightbox系スクリプトを書き換える必要があるんじゃないかと思う。(グループ表示しやすいcolorboxを使う予定）

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タグを指定するだけでもできた。

indexhibit_v2カスタマイズその1

Horizontal formatの画像にpaddingで白枠を付ける

body内の展示部分であるformat.horizontal.php
画像にpaddingで白枠を付けたい。

画像展示部分の大枠であるdiv id='img-container'の横幅がphp上で算出されているので

#img-container {
width: 5000px;
}

firebug上ではこのような形で出ている。


本来ならばphpの計算部分を書き換える必要があるが、phpはあまり詳しくない＆ユーザフォーラムの
英語の壁もあり書き換え場所、記述方法共にわからずどうにもうまくいかない。
単純に画像のdivに対して

#img-container .picture {
float: left;
padding:30px;
}


とかやるとimg-containerのwidthとfloatされて画像と枠のサイズが合わずに、はみ出してしまって
横並びになってる画像のレイアウトが崩れてしまう。


とりあえずの解決方法として

画像間のセパレーションのdivも自動的に作られているので
この幅を一時的に画像のpadding分を足した大きな数字を入れておき、
img-containerのwidthを計算させてから

最後に

#img-container .separator {
 width: 50px;
}

のように戻してやればいけるんじゃないかと思ってるがどうだろう。

追記

できた。

format.horizontal.php 115行目辺り（paddingの両端30pxと画像間のseparatorの幅を60pxとした。）

// PADDING AND TEXT WIDTH ADJUSTMENTS UP HERE!!!
$this->picture_block_padding_right = (isset($OBJ->hook->options['horizontal_settings']['margin'])) ? 
	$OBJ->hook->options['horizontal_settings']['margin'] : 120;

paddingの両端30pxと画像間のseparatorの幅を60pxとしたので120にした。


んで455行目辺りに追記

#img-container .separator { width: 60px !important; }
#img-container .picture { float: left; background:#fff; padding:30px; }

separatorの幅を60px !importantで上書きして画像のpaddingを30pxにして白枠作成完了。


このやり方だと最後の画像の横が120pxぐらい空く形になったけどひとまずこれで対応。