Sortable Fancybox Galleryを使う

   

concrete5でギャラリーを作ることができるブロックということで紹介されるSortable Fancybox Galleryを使ってみました。

インストールする

Sortable Fancybox Galleryをインストールします。

機能追加 2014-11-14 16-28-27

Sortable Fancybox Galleryブロックを追加する

concrete5 -- gallery 2014-11-14 16-32-50

挿入したいエリアをクリックし、「ブロックを追加」をクリック。

concrete5 -- gallery 2014-11-14 16-33-30

Sortable Fancybox Galleryブロックが追加されているので、クリックします。

concrete5 -- gallery 2014-11-14 16-34-02

ギャラリー作成画面。

File Setでセット内の画像をギャラリーにしてくれるようなので、あらかじめファイルマネージャーで画像をセットしておかなければいけない。

concrete5 -- ファイルマネージャー 2014-11-14 16-36-23

セットしたい画像横のチェックボックスにチェックをいれて、「選択したアイテムの」「セット」を選びます。
そこからセットがある場合は、セットしたい項目名をチェック、ない場合は新しく作る。

サンプルではnaviというセットをつくってその中にナビゲーション画像をガシガシまとめました。

concrete5 -- gallery 2014-11-14 16-36-57

英語だよ!でも使っていくとなんとなくわかります。

とりあえず
Display Columns ・・・表示するカラムを入力する。今回は3枚ずつ並べたいので3

Enable lightbox ・・・lightboxのような表示にするかどうか
チェックを外すと実寸画像で表示され、lightbox実装はされない。

Max Image Width/Max Image Height ・・・拡大したときの画像の最大サイズ。

Thumbnail Width/Thumbnail Height ・・・サムネイル画像の最大サイズ。

横幅と高さは指定しておくとどちらかに達したときに自動的に?うまいことリサイズしてくれます。

Transition Effect ・・・Fadeは画像がブラウザ上にほわわ~んってでてくるし、Elasticはサムネイル画像の位置から拡大画像がずずいっと現れる。
・・・このあたりはさわった感覚でお好みで^▽^

Title Position ・・・タイトル位置です。後述参考。

画像の並び順はドラッグして並び替えできます。

できたら「新規」をクリック。

concrete5 -- gallery 2014-11-14 16-37-29

こんな感じで表示されます。

concrete5 -- gallery 2014-11-14 16-38-02

Title PositionをOutsideにした場合。

concrete5 -- gallery 2014-11-14 16-47-11

Title PositionをInsideにした場合。

concrete5 -- gallery 2014-11-14 16-47-51

Title PositionをOverにした場合。

※ページリストブロックのカスタムテンプレートでSortable Fancybox Galleryを使ったブロックを表示するような場合(たとえばブログ一覧をページリストで表示していて、本文全表示してる、など)、メニューバーが表示されなかったりjsやCSSが反映されない場合があります。
Sortable Fancybox Galleryは一覧に表示されないようにカスタマイズする、またはうまく動くようにカスタマイズする必要があるかもしれません。

 - concrete5 ,