Shadowbox を導入してみた

画像等をレイヤー表示する 「Shadowbox」を導入してみました。

New スーパーマリオブラザーズ U

上記画像をクリックするとレイヤー表示されます。

Shadowbox.js
Shadowbox
⇒http://www.shadowbox-js.com/index.html

Shadowboxとは

  1. Shadowbox」とは画像をレイヤー表示したり、複数枚をスライドショーで表示したりできるアプリケーションです。

  2. 画像ビューワーとも呼びます。

  3. この手のアプリケーションは原点になった「LightBox」から派生したものということでLightBox系と呼ばれることがあります。

  4. 「LightBox」は画像しか扱えませんでしたが、「Shadowbox」では動画やWebサイトまでレイヤー表示できるようになってます。

  5. なのでメディアビューワーとも呼びます。

  6. 今回「Shadowbox」をブログに導入してみました。その導入記録です。

Shadowbox導入方法

  1. Shadowbox導入方法は下記を参照しました。


  2. YouTube、WMP、SWF、MOV、WMV、Webページなどのサムネイル画像・文字をクリックして、そのページ内で動画などを開く方法(Shadowbox)
    ⇒http://urbanqee.com/webutil/photo/shadowbox/photo-shadowbox.html
    リンク先プレビュー

  3. スターフィールド株式会社
    lightbox系プラグイン「Shadowbox.js」が便利でかっこいい
    ⇒http://sterfield.co.jp/designer/lightbox%E7%B3%BB%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%8Cshadowbox-js%E3%80%8D%E3%81%8C%E4%BE%BF%E5%88%A9%E3%81%A7%E3%81%8B%E3%81%A3%E3%81%93%E3%81%84%E3%81%84.html
    リンク先プレビュー

  4. まずはアプリケーション本体をダウンロードします。

  5. Shadowbox.js
    Shadowbox
    ⇒http://www.shadowbox-js.com/index.html

  6. 執筆時におけるshadowboxの最新バージョンは V3.03

  7. フォルダ内に含まれるファイルの内、使用するファイルは下記の通り

    • shadowbox.css
    • shadowbox.js
    • loading.gif
    • close.png
    • next.png
    • pause.png
    • play.png
    • previous.png
  8. つまりCSS[shadowbox.css]とJavaScript[shadowbox.js]と6種の画像ファイルを使う。

  9. 先に6種の画像ファイルをアップロードしておく。その際にアップロード先のURLをメモしておくこと。

  10. CSS[shadowbox.css]ファイルをメモ帳やワードパッドで開き編集する。

  11. 要注意ポイント
    CSS[shadowbox.css]に含まれる画像のパス url(***.png) 等を url([アップロード先]/***.png) 等に変更する。

  12. 私の場合は http://blog-imgs-60.fc2.com/k/u/m/kumarajyu/loading.gif といったURLになったので、[アップロード先]は http://blog-imgs-60.fc2.com/k/u/m/kumarajyu/ ということ。

  13. メモ帳の検索機能 [ctrl]+[F] を使って、「.gif」「.png」を検索すれば、変更すべき上記6種類の画像ファイルの場所が簡単に見つかります。

  14. 画像パスを6種類全て変更したら保存します。

  15. CSS[shadowbox.css]とJavaScript[shadowbox.js]をアップロードします。その際にアップロード先のURLをメモしておくこと。

  16. ブログテンプレートの設定でHTML部分を編集します。

  17. テンプレートのHTML編集用コード

    <!-- ▼▼▼ shadowbox head 開始 ▼▼▼ -->
    <link rel="stylesheet" type="text/css" href="[アップロード先]/shadowbox.css">
    <script type="text/javascript" src="[アップロード先]/shadowbox.js"></script>
    <script type="text/javascript">
    Shadowbox.init({
      animate: "true", //表示するときのアニメーションの有無
      animateFade: "true", //表示する際フェイドさせるか否か
      initialHeight: 100, //relで高さを指定しない場合の最小の高さ
      initialWidth: 100, //relで幅を指定しない場合の最小の幅
      overlayColor: "#000", //背景の色の指定
      overlayOpacity: 0.8, //背景の透過度の設定
      showOverlay: "true", //背景の表示の有無
      handleOversize: "resize",  //コンテンツが大きい場合リサイズする "drag"に設定するリサイズせず、ドラッグ可能になる
      slideshowDelay: 0, //スライドを自動送りの時間、1で1秒 0だと自動送りしない
      continuous: "false", //ギャラリーをループできるようにするか否か
      counterLimit: 10, //カウントの限界値
      counterType: "default", //skipに設定すると枚数のカウントを別々にしてリンクできるようにする
      displayCounter: "true", //カウントの表示の有無
      displayNav: "true" //ナビゲーションの表示の有無
    });
    </script>
    <!-- ▲▲▲ shadowbox head 終了 ▲▲▲ -->
    
  18. [アップロード先]は各自のものに変更して、コードをヘッド部分(分からなければ </head> の直前の行)に書き加えます。

  19. オプション部分については説明を参照して任意に書き換えます。

  20. その他のオプションに関する情報は下記参照

  21. Shadowbox.js
    Options
    ⇒http://www.shadowbox-js.com/options.html

  22. 書き加えたら更新・保存してHTML編集は終了。

Shadowbox仕様の記述方法

  1. 前提としてFC2ブログの環境設定で、投稿設定の[画像のリンク]を「 画像を記事に挿入する際に[元画像にリンクさせて]挿入」にしておくと便利。アルバムページからのリンクは不可

  2. 画像一枚ごとに機能させる場合、target="_blank" があれば削除し、rel="shadowbox" を書き加える。もしくは置換する。

  3. サンプルコード

    <a href="画像URL" rel="shadowbox">サムネイル画像やテキスト</a>
    
  4. 画像複数枚をセットにして機能させる場合、rel="shadowbox[セット名]" と任意のセット名を記述。

  5. 画像はファイル名のソート順に表示されるので、画像ファイル名は[セット名001.jpg]などとナンバリングしておくと意図した順に表示できる。

  6. サンプルコード

    <a href="画像URL/セット名001.jpg" rel="shadowbox[セット名]">サムネイル画像やテキスト</a>
    <a href="画像URL/セット名002.jpg" rel="shadowbox[セット名]">サムネイル画像やテキスト</a>
    <a href="画像URL/セット名003.jpg" rel="shadowbox[セット名]">サムネイル画像やテキスト</a>
    <a href="画像URL/セット名004.jpg" rel="shadowbox[セット名]">サムネイル画像やテキスト</a>
    
  7. 画像を表示したときに解説文も一緒に表示させるなら、title="解説文" も追加して記述する。

  8. サンプルコード

    <a href="画像URL" title="解説文" rel="shadowbox">サムネイル画像やテキスト</a>
    
  9. サンプルコード

    <a href="画像URL/セット名001.jpg" title="001の解説文" rel="shadowbox[セット名]">サムネイル画像やテキスト</a>
    <a href="画像URL/セット名002.jpg" title="002の解説文" rel="shadowbox[セット名]">サムネイル画像やテキスト</a>
    <a href="画像URL/セット名003.jpg" title="003の解説文" rel="shadowbox[セット名]">サムネイル画像やテキスト</a>
    <a href="画像URL/セット名004.jpg" title="004の解説文" rel="shadowbox[セット名]">サムネイル画像やテキスト</a>
    
  10. 動画も同様にして表示できるが、その際にサイズの指定が推奨となる。

  11. サンプルコード

    <a href="動画のURL" rel="shadowbox; width=640; height=480;">動画のサムネイル画像やテキスト</a>
    
  12. YouTubeの動画を引用する場合、埋め込みコード用の src="動画URL" 箇所のURLを貼る。

  13. Webも同様にして表示できるが、サイズの指定が推奨となる。

  14. サンプルコード

    <a href="WebのURL" rel="shadowbox; width=640; height=480;">テキスト</a>
    
  15. リンク先のプレビュー用に便利かと思う。

Shadowbox テスト

スライドショー

  1. スライドショー 設定は1秒ごとでループ再生

    Nintendo Land モンスターハンター3 (トライ) G HD Ver FIFA 13 ワールドクラスサッカー マスエフェクト 3 -特別版- 鉄拳タッグトーナメント2 Wii U EDITION 無双OROCHI2 Hyper アサシン クリードIII ZombiU(ゾンビU) バットマン・アーカム・シティ アーマード・エディション NINJA GAIDEN 3 Razors Edge

動画 YouTube埋め込み

  1. テスト動画

  2. youtubeのURLは、動画のページにある「共有」>「埋め込みコード」のsrcの部分のURL

  3. サンプルコード

    <a href="//www.youtube.com/embed/jelfuOt5UpI?rel=0" title="ShadowBoxテスト用動画" rel="shadowbox; width=640; height=480;">テスト動画</a>
    

Web

  1. YAHOO! トップ

  2. サンプルコード

    <a href="http://www.yahoo.co.jp" title="リンク先プレビュー" rel="shadowbox;width=640;height=800">YAHOO!</a>
    
関連記事
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

コメント

コメントの投稿

非公開コメント


ページ下部までご覧いただきありがとうございました。