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&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行目の

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

の部分を、

<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&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>";

に変更（緑字を赤字に）します。

環境設定→投稿記事（WGPは登録作品、WCPは登録商品）の表示設定→アップロードファイルへのリンク時に付加する属性を「rel="lightbox"」にします。
複数の画像をアップする場合は「rel="lightbox-atomium"」（赤字部分は任意のものでOK）にしておきます。

コメント登録

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

名前

メールアドレス

URL

コメント（コメント本文の装飾について）

コメント本文の装飾について

本文に特定の記号を書くことにより、手軽にマークアップを行うことができます。

引用

概要

文章を >> だけの行と << だけの行で囲うと引用に変換します。

入力例

この部分は通常の文章です。
>>
ここは引用になります。
<<
この部分は通常の文章です。

結果

この部分は通常の文章です。

ここは引用になります。

この部分は通常の文章です。

整形コード

概要

文章を >|| だけの行と ||< だけの行で囲うと整形コードに変換します。プログラムの掲載時に利用すると読みやすくなります。

入力例

この部分は通常の文章です。
>||
<html>
　<body><p>HTMLやプログラムを掲載することができます。</p></body>
</html>
||<
この部分は通常の文章です。

結果

この部分は通常の文章です。

<html>
　<body><p>HTMLやプログラムを掲載することができます。</p></body>
</html>

この部分は通常の文章です。

閲覧制限

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

freoをカタカナ3文字で入力してください（スパム対策）

登録者情報を記憶する

日	月	火	水	木	金	土
-	-	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	-	-

freoカスタマイズ集