FC2 で Popbox 

当ブログでは画像のサムネイル表示をする場合、
お気に入り画像は HighSlide JS を使用しデコレートています。


大き目の画像は記事内でサイズ指定後、
Popbox を使用して原寸に拡大する事にしました。
以下に FC2 で導入する際の注意点を記載
(1)<head>内の記述
<script src="[あなたのパス]/PopBox.js" type="text/javascript"></script>
  //PopBoxの本体
<script type="text/javascript">
  popBoxWaitImage.src = "[あなたのパス]/spinner40.gif";
  //ロード(読み込み中)イメージのパス
  popBoxRevertImage = "[あなたのパス]/magplus.gif";
  //画像拡大時の右上部の-(マイナス)虫眼鏡マークのパス
  popBoxPopImage = "[あなたのパス]/PopBox_magminus.gif;
  //画像拡大時の右上部の+(プラス)虫眼鏡マークのパス
</script>
[注記]管理人は Highslide もそうですが、推奨の<head>内ではなく、
    </body>直前に置いていても使えています。

(2)CSSの記述
  .PopBoxImageSmall
  {
    border: none 0px #fff;
    cursor: url([あなたのパス]/zoomin.ico), pointer;
  }
  .PopBoxImageLarge
  {
    border: solid 1px #999;
    cursor: url([あなたのパス]/zoomout.ico), pointer;
  }
  .PopBoxImageShrink
  {
    cursor: url([あなたのパス]/zoomout.ico), pointer;
  }
  .PopBoxImageLink
  {
    cursor: pointer;
  }
  .PopBoxImageMove
  {
    border: none 0px #fff;
    cursor: pointer;
  }
[注記]カーソルの拡張子を cur→ico に変えてUP

(3)記事内の記述
  <img src="サムネイル画像" //当ブログでは widthとheightで直接サイズ指定
  pbsrc="拡大時の画像" onclick="Pop(this,50,'PopBoxImageLarge');"
  class="PopBoxImageSmall" pbreverttext="拡大時上のテキスト" pbcaption="拡大時下のテキスト"
   pbPopText="クリックで拡大" pbshowpopbar="true" />
[注記]pbPopText はサムネイル上に表示されるテキスト
    それぞれのテキストは画像領域に被るので表示しない指定も可能

参考サイト:軽い動作の画像ポップアップスクリプト (PopBox!)
        画像をポップアップさせる「PopBox!」を導入してみる
サンプル:佐川美術館(このページは Highslide も使用しています)

(4)動画もオーバーレイ表示させる「Lightpop」
 Popboxはブログ記事内の画像をブラウザウィンドウ内にオーバーレイ表示させるだけだが、
 動画もオーバーレイ表示させる事が出来る「Lightpop」もある。
 当ブログでは、jQuery のバージョンの関係!? でエラーが発生したので
 導入を見送ったが、
中々、クールである。(H23.10.22.TEST
 参考サイト:画像や動画など、オーバーレイ表示できる jquery-lightpop を入れてみた。
関連記事
  関連商品のご紹介
【スポンサーリンク】

最終更新日時: -0001年11月30日(水)00:00:00
ブログパーツ

Comment 0

There are no comments yet.

Leave a comment