エントリー

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)にしておきます。

ページ移動

関連エントリー

コメント

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

コメント登録

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

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

ユーティリティ

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