ユーティリティ

2017年06月

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

キーワード検索

キーワード検索フォーム
キーワード

ユーザー

  • cccのアバター

新着画像

過去ログ

Twitter

Twilogを見る

Feed

エントリー

Shadowboxの設置方法

  • Shadowboxの表示のサンプルは こちら
  1. Shadowbox.js の右側にある「Download」をクリックし、ダウンロードのページでChoose the adapter you'll be using:を「Base(standalone)」、Choose the language support you need:を「Japanese」と選択し、一番下の「The current version of Shadowbox is 3.x.x」の「ZIP」の方をクリックしてダウンロードします。
    ※画像以外の動画などの表示にも使用したい場合は、「Select the player(s) for the types of content you want to display:」の「Images」以外のものも適宜チェックしてダウンロードして下さい。
  2. ダウンロードしたものを解凍し、そのフォルダを shodowbox にリネームしてWeb Diary Pro(またはWeb Gallery pro、Web Cart pro)の skin/ 内に移します。
    skinshadowboxshadowbox.jsshadowbox.cssclose.pngloading.gifnext.pngpause.pngplay.pngprevious.png
  3. skin/header.html<head></head> 内に
    <link rel="stylesheet" type="text/css" href="${INFO_URL}skin/shadowbox/shadowbox.css">
    <script type="text/javascript" src="${INFO_URL}skin/shadowbox/shadowbox.js"></script>
    <script type="text/javascript">
    	Shadowbox.init();
    </script>
    を加入します。
  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行目の

      $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>";
      に変更(緑字赤字に)します。
  5. 環境設定 ⇒ 投稿記事(WGPは登録作品、WCPは登録商品)の表示設定 ⇒ アップロードファイルへのリンク時に付加する属性を「rel="shadowbox"」にします。
    複数の画像をアップする場合は「rel="shadowbox[roadtrip]"」([ ]内は任意のものでOK)にしておきます。

ページ移動

関連エントリー

コメント

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

コメント登録

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