エントリー

Highslide JSの設置方法

  • Highslide JSの表示のサンプルは こちら

※基本編

  1. Highslide JS の左側のメニューにある「Download」を開いて「Get the zip package」の下にある「Download now!」ボタンを押して一番下にある「Do you accept the licence conditions above?」の「Yes」ボタンを押してダウンロードします。
  2. ダウンロードしたものを解凍し、その内 highslide/ をWeb Diary Pro(またはWeb Gallery pro、Web Cart pro)の skin/ 内にアップします。(下に書かれているファイルのみアップすればOK)
    skinhighslidehighslide.csshighslide-full.jsgraphics ~ (略)
  3. skin/header.html<head></head> 内に
    <link rel="stylesheet" href="${INFO_URL}skin/highslide/highslide.css" type="text/css" />
    <script type="text/javascript" src="${INFO_URL}skin/highslide/highslide-full.js"></script>
    <script type="text/javascript">
    hs.graphicsDir = '${INFO_URL}skin/highslide/graphics/';
    hs.align = 'center';
    hs.outlineType = 'rounded-white';
    </script>
    を追加します。
  4. skin/highslide/highslide.css の17行目あたりの
    .highslide img {
    border: 2px solid silver;
    }

    の部分を、

    .highslide img {
    border: 0px;
    }
    に変更(緑字赤字に)します。
  5. Web Diary Proの場合

    lib/webliberty/App/Diary.pm の980行目の

    $file = "<a href=¥"$info_path?mode=image&amp;upfile=$_¥"$target><img src=¥"$file_path$_¥" alt=¥"ファイル $_¥" width=¥"$width¥" height=¥"$height¥" /></a>";

    の部分を、

    $file = "<a href=¥"$info_upfile_path$_¥"$target><img src=¥"$file_path$_¥" alt=¥"ファイル $_¥" width=¥"$width¥" height=¥"$height¥" /></a>";

    に変更(緑字赤字に)します。

    Web Gallery proの場合

    lib/webliberty/App/Gallery.pm の885行目の

    $file = <a href=¥"$info_path?mode=image&amp;upfile=$article_file¥"$target><img src=¥"$file_path$article_file¥" alt=¥"ファイル $article_file¥" width=¥"$width¥" height=¥"$height¥" /></a>";

    の部分を、

    $file = "<a href=¥"$file_path$article_file¥"$target><img src=¥"$file_path$article_file¥" alt=¥"ファイル $article_file¥" width=¥"$width¥" height=¥"$height¥" /></a>";

    に変更(緑字赤字に)します。

    Web Cart proの場合

    lib/webliberty/App/Catalog.pm の871行目の

    $file = "<a href=¥"$info_path?mode=image&amp;upfile=$article_file¥"$target><img src=¥"$file_path$article_file¥" alt=¥"ファイル $article_file¥" width=¥"$width¥" height=¥"$height¥" /></a>";

    の部分を、

    $file = "<a href=¥"$file_path$article_file¥"$target><img src=¥"$file_path$article_file¥" alt=¥"ファイル $article_file¥" width=¥"$width¥" height=¥"$height¥" /></a>";
    に変更(緑字赤字に)します。
  6. 環境設定→投稿記事(WGPは登録作品、WCPは登録商品)の表示設定→アップロードファイルへのリンク時に付加する属性を「class="highslide" onclick="return hs.expand(this)"」にします。

※応用編

  1. キャプション(画像のタイトル等)を表示する場合

    本文(または紹介文)で画像を表示したい部分に、

    $FILE1<span class="highslide-caption"&gtタイトル</span>
    と入れれば画像が表示されたときに下にタイトルが表示されます。
  2. 複数の画像をアップする場合にコントロールバーをつける

    基本編の3.(skin/header.html<head></head> 内ヘの追加)で

    <script type="text/javascript">
      hs.graphicsDir = '${INFO_URL}skin/highslide/graphics/';
      hs.align = 'center';
      hs.outlineType = 'rounded-white';
    </script>

    の部分を、

    <script type="text/javascript">
      hs.graphicsDir = '${INFO_URL}skin/highslide/graphics/';
      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
        }
      });
    </script>
    に変更(赤字を追加)します。

ページ移動

関連エントリー

コメント

リッツ

はじめまして。
このたび記事を参考にHighslide JSをWDPに導入したのですが、Google Chromeでは正常に動作しないようです。
キャプション文字が本文に表示されてしまい、拡大画像には何も表示されません。
IEおよびFFでは正常に動作しております。
どうすればGoogle Chromeでも正常に動作するようになるでしょうか?
お手数ですがご回答いただければ幸いです。

  • 2011/04/08 14:39:00

ccc

最新のver.4.1.12で確認したところ、FF4でも表示できないようですね(^^ゞ
本文に入れるところを
$FILE1<span class="highslide-caption">タイトル</span>
にしてみてください。そうすれば正しく表示できるようになります。
記事・サンプルも修正しておきました。
ただ(修正以前からの現象ですが)IEだと1回目はタイトルが表示されるのに、2回以上クリックするとタイトルが表示できないみたいですorz

  • URL
  • 2011/04/13 00:14:00

リッツ

ご回答ありがとうございました。
さっそく試してみたところ、正常に動作が確認できました。
大変助かりました。

  • 2011/04/18 11:54:00

コメント登録

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

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

ユーティリティ

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