エントリー

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]"」([ ]内は任意のもので可)にしておきます。

ページ移動

関連エントリー

コメント

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

コメント登録

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

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

ユーティリティ

2024年03月

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