ユーティリティ

2017年10月

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

エントリー

Lightbox2の設置方法

Lightbox2の設置方法が変更になっているので修正しました。
【2012/11/25】Lightbox2のバージョンが2.5からjQureyを使用するようになったので書き換えました
  • Lightbox2の表示のサンプルは こちら
  1.  Lightbox 2 のページにある「Download」より「Lightbox v2.xx」をダウンロードします。
  2.  ダウンロードしたものを解凍し、その内 css/images/js/ の各フォルダのファイルから以下のものをWeb Diary Pro(またはWeb Gallery pro、Web Cart pro)の skin/ 内にアップします。
    skinjsjquery-x.x.x.min.js(xはバージョンの数字)
     ┃    ┗ lightbox.jscsslightbox.cssimagesclose.pngloading.gifnext.pngprev.png
  3. skin/js/lightbox.js の51~52行目あたりにある
    this.fileLoadingImage = 'images/loading.gif';
    this.fileCloseImage = 'images/close.png';
    this.fileLoadingImage = '/diarypro/skin/images/loading.gif';
    this.fileCloseImage = '/diarypro/skin/images/close.png';
    に変更(赤字の部分を追加)します(diaryproの部分はプログラムを入れているフォルダ名にします)。
  4. skin/css/lightbox.css の114行目あたりにある
    background: url(../images/prev.png) left 48% no-repeat;
    background: url(../skin/images/prev.png) left 48% no-repeat;
    に、
    また119行目あたりにある
    background: url(../images/next.png) right 48% no-repeat;
    background: url(../skin/images/next.png) right 48% no-repeat;
    にそれぞれ変更(赤字の部分を追加)します。
  5. skin/header.html<head></head> 内に
    <link rel="stylesheet" href="${INFO_URL}skin/css/lightbox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="${INFO_URL}skin/js/jquery-x.x.x.min.js"></script>
    <script type="text/javascript" src="${INFO_URL}skin/js/lightbox.js"></script>
    を加入します(jquery-x.x.x.min.jsは実際にアップするファイル名にしてください)。
  6. アプリケーションファイルの編集
    • 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行目の

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

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

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

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

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

    ※複数の画像をアップする場合は「rel="lightbox[roadtrip]"」([ ]内は任意のもので可)にしておきます。

ページ移動

関連エントリー

コメント

  • コメントはまだありません。

コメント登録

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