エントリー

freoでHighslide JSを導入するには(応用編)

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

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ですが、メディア登録した画像の場合はそのままだとファイル名で設定されてしまいます。
    タイトルを設定するには記事編集画面の「画像の編集/挿入」ボタン(画像の赤丸で囲んだボタン)をクリックします。
    ファイル 30-1.jpg
    「画像の編集/挿入」ウィンドウが表示されたら「タイトル」のところを適宜変更してください。
    ファイル 30-2.jpgファイル 30-3.jpg
    画像に設定が完了したら登録を行います。

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

  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.jshighslide/highslide-with-gallery.js と差し替えます。
    freojshighslide-full.js または highslide-with-gallery.js
     ┃    ┗ highslide-set.jscsshighslide.css
     ┃     ┗ highslide-ie6.cssimagesgraphics ~(略)
  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>
    を追加します。

ページ移動

関連エントリー

コメント

  • コメントはまだありません。

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム

基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がありますので、その旨ご了承下さい。

ユーティリティ

2024年03月

- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31 - - - - - -

キーワード検索

キーワード検索フォーム

ユーザー

  • cccのアバター

新着画像

ブログパーツ

Twitter

Twilogを見る

Feed