96th Street | MODxスニペット実例　MaxiGallery

MaxiGallery

親アルバムの設定

このサイトの写真ギャラリー『TWILIGHT DUSK BLUE』で使ってるMaxiGalleryの設定です。

スニペットコールはこんな感じ↓

[!MaxiGallery? &display=`childgalleries`!]

単純なコールだなwww

子アルバムの設定

子アルバムはちょっと複雑w

[!MaxiGallery? &display=`embedded` &embedtype=`lightboxv2` &pics_per_row=`3` &max_thumb_size=`110` &max_pic_size=`600`　&order_direction=`ASC` &order_by=`id`!]

Lightboxの表示動作があまりに気に入ったので採用w

&pics_per_row　でサムネイルで横に並ぶのを3つにしてある

&max_thumb_sizeでサムネイルの縦横大きい方の幅を110pxにして

&max_pic_sizeで拡大表示する時の幅を600pxにしている。

&order_byで画像をアップしたときに順番で割り当てられるidを表示順序に設定。これでアップした順番にサムネイルが並ぶ。ただし降順になるので、&order_direction　で並び順を昇順に変更してある。

cssとテンプレートを改造

cssファイルは　assets/snippets/maxigallery/css/default.css　が標準で読み込まれている。

ギャラリーの表示テンプレートはassets/snippets/maxigallery/templates/ にあって、子アルバムの表示がchildgallerytpl.html 親アルバムの表示がgallerypicturetpl.html　で制御されてるみたい。(* -_・)ﾝ?逆だっけか???　あれ???どっちだったかな?w

とりあえずcss設定。サムネイルはliタグで並んでいる。なので、cssファイルのliタグ設定をちょこっと改造。

ul.thumbs li {
list-style:   none;
float:     left;
display:    block;
list-style-image:  none !important;
height: 135px;
width: 120px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 0;
margin-left: 5px;
background-color: #373028;
text-align: center;
padding: 3px;
}

↑こんな感じにしてある。

これで写真の向きが縦横混在していてもきれいに並ぶようになった。

あとは、サムネイルの下に子アルバムでは写真タイトル、親アルバムでは子アルバムの名称が入るようになっているが、pタグで囲まれているため、画像との間に結構大きな隙間ができる。あんまり縦長にしたくなかったんで間を詰めることにした。

cssでpタグの設定を書き込んでやるのが正しい方法かもしれないが、めんどかったので(爆)テンプレートの方を書き換えてpタグを消し、写真の後に改行タグをいれた。これで写真と文字の間の隙間が消えて、まぁいい感じになったかな。。。?w

childgallerytpl.htmlはこんな感じにしてある。

<li>
<a href="[+maxigallery.childurl+]">
<img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]" class="thumbnail" title="[+maxigallery.strings.go_to_gallery+]" alt="[+maxigallery.strings.go_to_gallery+]" />
</a><br />
[+maxigallery.pageinfo.pagetitle:htmlent+]
</li>

gallerypicturetpl.htmlは長いので最後の4行だけw

</a><br />
[+maxigallery.picture.title:isnot=``:then=`
[+maxigallery.picture.title:htmlent+]
`+]</li>
`+]

ほんとはサムネイルの縦方向も中央揃えにしたいんだけどな。。。どぉするかな。。。?　まぁこれは宿題www