フォトギャラリー

ページ内で簡単にフォトギャラリー

ページ内で簡単にフォトギャラリーができるGalleriaモジュールを追加しました。

ここで ご紹介するフォトギャラリーはページ内で完結するタイプのフォトギャラリーです。複数のコンテンツ（ページ）にまたがる より応用性のあるフォトギャラリーはフォトギャラリー2でご紹介しています。

使用方法は以下の通りです。

1. 管理セクション≫サイトの環境設定≫Galleriaページを開きます。 
   
2. 履歴を記録し戻るボタンで戻れるようにする： 戻るボタンを使用する場合はチェックします。
3. フェードイン時間(ミリ秒):フェイドインしない場合は「0」を設定して下さい。
4. メイン画像を表示する要素id：に要素idを入力します。通常変更の必要はありません。
5. サムネイルを表示するコンテナ：サムネイルを表示するコンテナを指定します。通常変更の必要はありません。

1. コンテンツ編集画面を開きます。
   
2. [ソース]状態にし、以下の内容をペーストします。
   <div class="actbrain_galleria"><div id="actbrain_galleria_mainimage"> </div><div class="actbrain_galleria_thumbnails"><div><ul id="x-actbrain_galleria-ul"><li class="active"><img title="Title1" src="" _fcksavedurl="" width="90" /> </li><li><img title="Title2" src="" _fcksavedurl="" width="90" /> </li><li><img title="Title3" src="" _fcksavedurl="" width="90" /> </li><li><img title="Title4" src="" _fcksavedurl="" width="90" /> </li></ul><div class="actbrain_galleria_stop"> </div></div></div></div>  
3. 編集画面が こんな感じになります。
   
   [×]や見た目は気にしないで下さい。
4. 次に[×]の画像部分をクリックし、[イメージ挿入/編集]ツールで表示したい画像をアップロード、またはサーバブラウザで選択します。
5. 幅 [90]にし、[OK]をクリックします。4つある[×]画像に対してそれぞれ行います。
6. 最後に[ソース]をクリックし、ソースWindowにします。
7. <ul id="x-actbrain_galleria-ul"> となっている所を探し、「x-」を削除し、再度[ソース]をクリックします。
8. すると、編集画面が
   
   のような感じになります。
9. [保存]して表示を確認して下さい。
    

 画像を入れ替えたりする場合は<ul id="actbrain_galleria-ul"> の部分を<ul id="x-actbrain_galleria-ul"> に戻します。