Slimbox2の設置方法
- 2009/11/07 17:32
- カテゴリー：Web Liberty
- タグ：Web Diary Pro, Web Gallery Pro, Web Cart Pro
- Slimbox2の表示のサンプルは こちら
- Slimbox2 - Download のページより「Slimbox 2.xx」をダウンロードします。
- ダウンロードしたものを解凍し、その内 css/、js/ をWeb Diary Pro（またはWeb Gallery pro、Web Cart pro）の skin/ 内にアップします。
skin ┣ js ━ slimbox2.js ┗ css ┳ slimbox2.css ┣ closelabel.gif ┣ loading.gif ┣ nextlabel.gif ┗ prevlabel.gif
- skin/header.html の <head>～</head> 内に
を追加します。<link rel="stylesheet" href="${INFO_URL}skin/css/slimbox2.css" type="text/css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript" src="${INFO_URL}skin/js/slimbox2.js"></script>
※jQuery.js は、ダウンロード版ではなく、CDNで読み込む形式に変更しました。 -
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行目の
<a href=¥"$info_path?mode=image&upfile=$article_file¥"$target><img src=¥"$file_path$article_file¥" alt=¥"ファイル $article_file¥" width=¥"$width¥" height=¥"$height¥" /></a>";の部分を、
<a href=¥"$info_upfile_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は登録商品）の表示設定→アップロードファイルへのリンク時に付加する属性を「rel="lightbox"」にします。
複数の画像をアップする場合は「rel="lightbox-atomium"」（赤字部分は任意のものでOK）にしておきます。
匿名希望
大変有益なカスタマイズ方法を教えてくださって感謝申し上げます。最新の情報が無く、戸惑っておりましたが、こちらのおかげで解決しそうです。