ラック
Home > CMS > 記事 > 2014年8月 > ギャラリー改造

ギャラリー改造

カテゴリ: MODx

以前に公開したギャラリーですが、味気なかったのでさらに色々と手を加えてみました。

	
<div class="evogallery">
[!EvoGallery?
&display=`images` //カレントリソースに保存されている画像を表示
&type=`simple-list` //画像をサムネイルでリストアップ
!]
</div>
	

とりあえずギャラリーのリソースはこんな感じでスニペットコールを。

  1. ということでLightboxを入れてみました。
    これにより、画像をクリックするとスライドショーになりました。
    やり方としては普通にLightboxをダウンロードしてcss,js,imgフォルダをアップロード、必要なcssとjsを読み込むギャラリー用のテンプレートを作成して、動作を確認。
    ※LightBoxでスライドショーをするためにrelタグを付ける必要があるのですが、EvoGalleryで追加した画像は"photo"クラスが付けられたdivタグで囲まれた形でソースに組み込まれるので、「.photo a」セレクタにattr関数でrel="lightbox[roadtrip]"を付与するjQueryを記述しました。
    なお、LightBox2.7.1だとmapファイルが同梱されているので、ツール>グローバル設定>ファイル管理でアップロードできるテキストファイルの拡張子にmapを追加してやる必要があります(mapファイルが必要なのかどうかは確認していませんが…)。
  2. 次に、サムネイル表示が縦にずらーっと並んでいるのは恰好悪いので少しでもレイアウトを弄りましょう、と。
    	
    .photo {
    	margin: 10px;
    	padding: 0;
    	float: left;
    	width: 175px;
    	height: 175px;
    	text-align: center;
    }
    .evogallery:after {
    	content: " ";
    	clear: both;
    	display: block;
    }
    	
    
    上記の通り、ギャラリーのリソースではEvoGalleryスニペットコール部分はdivタグで囲んで、そこにfloat用のクリアフィックスを指定。
    画像そのものに対する指定としては、上記の通り画像に"photo"クラスの付いたdivタグでラッパーされるので、cssではphotoクラスに対してmarginやfloatを指定。
    それと、EvoGalleryのデフォルトの指定だとサムネイルは高さ・幅共に175pxが最大値に指定されているので、それもphotoクラスの幅・高さの値として設定してボックスを固定サイズにしてしまいました(その方が楽なので…)。

ということで手抜きですが一応それっぽくはなった…かな、と思います。

タグ: カスタマイズ

 



関連する記事一覧