PopBoxの使い方

(1)PopBox.zipのダウンロード

http://www.c6software.com/Products/PopBox/からPopBox.zipをダウンロードできます

ダウンロードしたPopBox.zipを解凍する

(2)PopBox.jsの設定

javascript部分を自分のhtmlファイルに貼り付ける

<script type="text/javascript" src="js/PopBox.js"></script>

(3)グローバル変数の設定

javascript部分を自分のhtmlファイルに貼り付ける

<script type="text/javascript">
  popBoxWaitImage.src = "images/spinner40.gif";
  popBoxRevertImage = "images/magminus.gif";
  popBoxPopImage = "images/magplus.gif";
</script>

(4)Styles.cssの設定

css部分を自分のhtmlファイルに貼り付ける

<link rel="stylesheet" href="css/Styles.css" type="text/css">

(5)PopBox.jsとStyles.cssを自分のフォルダにコピーする

解凍した中にPopBox.jsとStyles.cssがあるので、それぞれ自分のフォルダにコピーする

(6)imagesフォルダを自分のフォルダにコピーする

解凍した中にimagesフォルダがあるので、自分のフォルダにコピーする

(7)画像とイベントの設定

Pop(this,20,'PopBoxImageLarge')の２番目の引数の数字は拡大縮小する時のスピードです
srcに小さい画像を設定します
pbsrcに大きい画像を設定します

<img src="img/200907081559_s.gif" width="60" height="60" alt="金のエンゼル"
pbsrc="img/200907081559.jpg" pbCaption="金のエンゼルが当たりました"
class="PopBoxImageSmall" title="金のエンゼル"
onclick="Pop(this,20,'PopBoxImageLarge')">

このPopBoxを使ったサンプルを見る

jquery