Shadowboxの設置方法
- 2011/04/14 17:01
- カテゴリー：Web Liberty
- タグ：Web Diary Pro, Web Gallery Pro, Web Cart Pro
- Shadowboxの表示のサンプルは こちら
- Shadowbox.js の右側にある「Download」をクリックし、ダウンロードのページでChoose the adapter you'll be using:を「Base(standalone)」、Choose the language support you need:を「Japanese」と選択し、一番下の「The current version of Shadowbox is 3.x.x」の「ZIP」の方をクリックしてダウンロードします。
※画像以外の動画などの表示にも使用したい場合は、「Select the player(s) for the types of content you want to display:」の「Images」以外のものも適宜チェックしてダウンロードして下さい。 - ダウンロードしたものを解凍し、そのフォルダを shodowbox にリネームしてWeb Diary Pro（またはWeb Gallery pro、Web Cart pro）の skin/ 内に移します。
skin ┗ shadowbox ┳ shadowbox.js ┣ shadowbox.css ┣ close.png ┣ loading.gif ┣ next.png ┣ pause.png ┣ play.png ┗ previous.png
- skin/header.html の <head>～</head> 内に
を加入します。<link rel="stylesheet" type="text/css" href="${INFO_URL}skin/shadowbox/shadowbox.css"> <script type="text/javascript" src="${INFO_URL}skin/shadowbox/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init(); </script> - アプリケーションファイルの変更
- 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>";
- Web Diary Proの場合
- 環境設定 ⇒ 投稿記事（WGPは登録作品、WCPは登録商品）の表示設定 ⇒ アップロードファイルへのリンク時に付加する属性を「rel="shadowbox"」にします。
複数の画像をアップする場合は「rel="shadowbox[roadtrip]"」（[ ]内は任意のものでOK）にしておきます。
