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

format.no_thumbsにmasonry（とcolorbox）を実装

作りが簡単そうだったformat.no_thumb.phpを素にした。

				$a .= ($OBJ->vars->exhibit['titling'] == 1) ? "\n<span class='nothumb'><img src='" . BASEURL . GIMGS . "/" . $OBJ->vars->exhibit['id'] . "_$go[media_file]' alt='$title' title='$title' />

<strong>$title</strong> $caption</span>$break\n" : 
				"\n<span class='nothumb'><img src='" . BASEURL . GIMGS . "/" . $OBJ->vars->exhibit['id'] . "_$go[media_file]' alt='$title' title='$title' /></span>$break\n";

以上61-62行目付近を以下のように修正した

				$a .= ($OBJ->vars->exhibit['titling'] == 1) ? "\n<div class='nothumb'><a class='colorbox' rel='photo' href ='". BASEURL . GIMGS . "/$go[media_file]' ><img src='" . BASEURL . GIMGS . "/" . $OBJ->vars->exhibit['id'] . "_$go[media_file]' alt='$title' title='$title' /></a><strong>$title</strong> $caption</div>$break\n" : 

				"\n<div class='nothumb'><a class='colorbox' rel='photo' href ='". BASEURL . GIMGS . "/$go[media_file]' ><img src='" . BASEURL . GIMGS . "/" . $OBJ->vars->exhibit['id'] . "_$go[media_file]' alt='$title' title='$title' /></a></div>$break\n";

spanをdivに変えてimgタグをcolorboxのclassを付けたアンカーで囲った形。

index.php

以前書いた内容と同様にtheme内のindex.phpのhead内

<last:page:javascript />

の後に

<script type="text/javascript" src="{{baseurl}}/ndxzsite/js/jquery.masonry.js"></script>
<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>

<script>
  $(window).load(function(){
    $('#img-container').masonry({
    itemSelector: '.nothumb',  
    isAnimated: true,  
    isFitWidth: true,  
    isRTL: false,  
    gutterWidth: 0,  
    containerStyle: { position: 'relative' }, 
    isResizable: true 
    });
      });
</script>

を追加。
またjQuery colorboxのcssファイルを9行目付近に挿入

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

IndexhibitでMasonryを使う場合の注意

$(document).ready(function(){

と書いていてchrome,safariなどwebkit系のブラウザでうまく動かなかったため

$(window).load(function(){

に変更してイメージが読み込まれた後に実行するようにした。

*

色々試したけどスクロールの方はまだうまくいってない。