エントリー
Highslide JSの設置方法
- カテゴリー：Web Liberty
- タグ：Web Diary Pro, Web Gallery Pro, Web Cart Pro
- Highslide JSの表示のサンプルは こちら
※基本編
- Highslide JS の左側のメニューにある「Download」を開いて「Get the zip package」の下にある「Download now!」ボタンを押して一番下にある「Do you accept the licence conditions above?」の「Yes」ボタンを押してダウンロードします。
- ダウンロードしたものを解凍し、その内 highslide/ をWeb Diary Pro（またはWeb Gallery pro、Web Cart pro）の skin/ 内にアップします。（下に書かれているファイルのみアップすればOK）
skin ┗ highslide ┳ highslide.css ┣ highslide-full.js ┗ graphics ～ （略）
- 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> - skin/highslide/highslide.css の17行目あたりの
.highslide img { border: 2px solid silver; }の部分を、
に変更（緑字を赤字に）します。.highslide img { border: 0px; } -
Web Diary Proの場合
lib/webliberty/App/Diary.pm の980行目の
$file = "<a href=¥"$info_path?mode=image&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&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&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>"; - 環境設定→投稿記事（WGPは登録作品、WCPは登録商品）の表示設定→アップロードファイルへのリンク時に付加する属性を「class="highslide" onclick="return hs.expand(this)"」にします。
※応用編
-
キャプション（画像のタイトル等）を表示する場合
本文（または紹介文）で画像を表示したい部分に、
と入れれば画像が表示されたときに下にタイトルが表示されます。$FILE1<span class="highslide-caption">タイトル</span> -
複数の画像をアップする場合にコントロールバーをつける
基本編の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>
ページ移動
関連エントリー
- 2014/01/29 Twitterの新ウィジェットを幅220px以下のサイドバーに収める方法
- 2013/01/27 WDPやWGPに忍者おまとめボタンを導入する
- 2012/11/25 Lightbox2の設置方法
- 2011/04/14 Shadowboxの設置方法
- 2011/03/14 Web Diary ProやWeb Diaryなどで[続きを表示]ボタンを設置する
- 2010/04/21 Web Diary ProのJS書き出しの文字数を制限する方法
- 2009/11/07 Slimbox2の設置方法
- 2009/11/07 Slimboxの設置方法
- 2009/11/01 WGPでタグ検索結果一覧の表示を古い順にする
- 2009/10/26 WDPの分類表示をリスト表示にする
コメント
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
コメント登録
- コメントを入力してください。
- 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
リッツ
はじめまして。
このたび記事を参考にHighslide JSをWDPに導入したのですが、Google Chromeでは正常に動作しないようです。
キャプション文字が本文に表示されてしまい、拡大画像には何も表示されません。
IEおよびFFでは正常に動作しております。
どうすればGoogle Chromeでも正常に動作するようになるでしょうか？
お手数ですがご回答いただければ幸いです。