エントリー
Lightbox2の設置方法
- 更新
- カテゴリー：Web Liberty
- タグ：Web Diary Pro, Web Gallery Pro, Web Cart Pro
Lightbox2の設置方法が変更になっているので修正しました。
【2012/11/25】Lightbox2のバージョンが2.5からjQureyを使用するようになったので書き換えました
- Lightbox2の表示のサンプルは こちら
- Lightbox 2 のページにある「Download」より「Lightbox v2.xx」をダウンロードします。
- ダウンロードしたものを解凍し、その内 css/、images/、js/ の各フォルダのファイルから以下のものをWeb Diary Pro（またはWeb Gallery pro、Web Cart pro）の skin/ 内にアップします。
skin ┣ js ┳ jquery-x.x.x.min.js（xはバージョンの数字） ┃ ┗ lightbox.js ┣ css ━ lightbox.css ┗ images ┳ close.png ┣ loading.gif ┣ next.png ┗ prev.png
- skin/js/lightbox.js の51～52行目あたりにある
this.fileLoadingImage = 'images/loading.gif'; this.fileCloseImage = 'images/close.png';の部分を、
に変更（赤字の部分を追加）します（diaryproの部分はプログラムを入れているフォルダ名にします）。this.fileLoadingImage = '/diarypro/skin/images/loading.gif'; this.fileCloseImage = '/diarypro/skin/images/close.png'; - 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; - skin/header.html の <head>～</head> 内に
を加入します（jquery-x.x.x.min.jsは実際にアップするファイル名にしてください）。<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> - アプリケーションファイルの編集
-
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行目の
$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>";に変更（緑字を赤字に）します。
-
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[roadtrip]"」（[ ]内は任意のもので可）にしておきます。
関連エントリー
- 2014/01/29 Twitterの新ウィジェットを幅220px以下のサイドバーに収める方法
- 2013/01/27 WDPやWGPに忍者おまとめボタンを導入する
- 2011/04/14 Shadowboxの設置方法
- 2011/03/14 Web Diary ProやWeb Diaryなどで[続きを表示]ボタンを設置する
- 2010/04/21 Web Diary ProのJS書き出しの文字数を制限する方法
- 2009/11/07 Highslide JSの設置方法
- 2009/11/07 Slimbox2の設置方法
- 2009/11/07 Slimboxの設置方法
- 2009/11/01 WGPでタグ検索結果一覧の表示を古い順にする
- 2009/10/26 WDPの分類表示をリスト表示にする
コメント
- コメントはまだありません。
コメント登録
- コメントを入力してください。
- 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
