ユーティリティ

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

エントリー

Slimbox2の設置方法

  • Slimbox2の表示のサンプルは こちら
  1. Slimbox2 - Download のページより「Slimbox 2.xx」をダウンロードします。
  2. ダウンロードしたものを解凍し、その内 css/js/ をWeb Diary Pro(またはWeb Gallery pro、Web Cart pro)の skin/ 内にアップします。
    skinjsslimbox2.jscssslimbox2.csscloselabel.gifloading.gifnextlabel.gifprevlabel.gif
  3. 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で読み込む形式に変更しました。
  4. 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>";

    に変更(緑字赤字に)します。

  5. 環境設定→投稿記事(WGPは登録作品、WCPは登録商品)の表示設定→アップロードファイルへのリンク時に付加する属性を「rel="lightbox"」にします。

    複数の画像をアップする場合は「rel="lightbox-atomium"」(赤字部分は任意のものでOK)にしておきます。

ページ移動

関連エントリー

コメント

匿名希望

大変有益なカスタマイズ方法を教えてくださって感謝申し上げます。最新の情報が無く、戸惑っておりましたが、こちらのおかげで解決しそうです。

  • 2011/03/01 22:15:00

コメント登録

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