freoカスタマイズ集

キャプションを画像のタイトルにする場合

Highslide JSでは <div class="highslide-caption">キャプション</div> を画像リンクの後に記述することでキャプションが入るのですが、freoではうまくいかないので、画像のタイトルをキャプションにする方法を解説します。

1. 基本編 の3.の </head> の手前に加入するソースを

   <script type="text/javascript">
   hs.graphicsDir = '{$freo.core.http_url}images/graphics/';
   hs.outlineType = 'rounded-white';
   hs.captionEval = 'this.thumb.title';
   </script>

   に変更（赤字を追加）します。
2. 添付ファイルを使用する場合は、登録画面の添付ファイル ⇒ ファイルの説明でタイトルの設定をすればOKですが、メディア登録した画像の場合はそのままだとファイル名で設定されてしまいます。
   タイトルを設定するには記事編集画面の「画像の編集/挿入」ボタン（画像の赤丸で囲んだボタン）をクリックします。
   
   「画像の編集/挿入」ウィンドウが表示されたら「タイトル」のところを適宜変更してください。
   
   画像に設定が完了したら登録を行います。

複数の画像をアップする場合にコントロールバーをつける

1. css/highslide.css をエディタで開き、全ての

   url(graphics/

   の部分を、

   url(https://cccabinet.jpn.org/images/graphics/

   と置換してUPします。
2. 基本編 の3.で </head> の手前に加入した

   <script type="text/javascript"&gt
   hs.graphicsDir = '{$freo.core.http_url}images/graphics/';
   hs.outlineType = 'rounded-white';
   </script>

   の部分を、

   <script type="text/javascript"&gt
   hs.graphicsDir = '{$freo.core.http_url}images/graphics/';
   </script>

   に変更（緑字を削除）し、
   js/highslide-set.js という以下の（赤字の）ソースの別ファイルを作成します。

   hs.align = 'center';
   hs.transitions = ['expand', 'crossfade'];
   hs.outlineType = 'rounded-white';
   hs.fadeInOut = true;
   //hs.dimmingOpacity = 0.75;
   
   // Add the controlbar
   hs.addSlideshow({
     //slideshowGroup: 'group1',
     interval: 5000,
     repeat: false,
     useControls: true,
     fixedControls: 'fit',
     overlayOptions: {
       opacity: .75,
       position: 'bottom center',
       hideOnMouseOut: true
     }
   });

   文字コードをUTF-8にして保存してUPします。
   ※js/highslide-set.js のソースについては、ダウンロードしたhighslideに添付されている index.html を開くといろんな事例が表示されるので表示したファイルのHTMLソースを参照してみてください。
3. 基本編でUPした js/highslide.js をダウンロードしたhighslideの highslide/highslide-full.js か highslide/highslide-with-gallery.js と差し替えます。

   freo
    ┣ js ┳ highslide-full.js または highslide-with-gallery.js
    ┃    ┗ highslide-set.js
    ┣ css ┳ highslide.css
    ┃     ┗ highslide-ie6.css
    ┗ images ━ graphics ～（略）

4. templates/header.html の

   <script type="text/javascript" src="{$freo.core.http_url}{$smarty.const.FREO_JS_DIR}highslide.js"></script>

   の部分を、

   <script type="text/javascript" src="{$freo.core.http_url}{$smarty.const.FREO_JS_DIR}highslide-full.js"></script>

   または、

   <script type="text/javascript" src="{$freo.core.http_url}{$smarty.const.FREO_JS_DIR}highslide-with-gallery.js"></script>

   に変更（緑字を赤字に）します。
   さらにその下に、

   <script type="text/javascript" src="{$freo.core.http_url}{$smarty.const.FREO_JS_DIR}highslide-set.js"></script>

   を追加します。