ユーティリティ

2019年08月

- - - - 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

エントリー

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

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム
名前
メールアドレス
URL
コメント(コメント本文の装飾について
閲覧制限
※基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がございますので、その旨ご了承下さい。
freoをカタカナ3文字で入力してください(スパム対策)