PopBarについての考察 >>

基本的な使い方のサンプル

■ Sample1：基本

　

本家サイトQuickStart による方法で設定した例です。
ポップアップした際、画像の上部，下部にテキストが表示されます。

下に、img タグの内容を掲載します。

単に画像をポップアップさせたい場合なら、最低id,src,pbsrc,onClickの部分を記述すればＯＫです。pbCaption,class,styleは オプション的な位置づけのようです。

<img id="imgsmp01"　・・・必須
 src="smple_img/img_smp01s.jpg"　･･･サムネイル画像
 pbsrc="sample_img/img_smp01.jpg"　･･･ポップアップ後画像
 pcCaption="サンプル１"　･･･キャプション
 class="PopBoxImageSmall"　・・・サムネイル画像のスタイル
 style="width:160px; height:120px;float:left;margin-right:1.2em;"・・・注１
 onClick="Pop(this,50,'PopBoxImageLarge');" />

 

とはいえ、classは設定した方がよいと思います。
下の画像は、id , src , pbsrc , onClickのみ設定した例です。class属性を指定しなかった場合、上のサンプルではサムネイル画像の上のマウスを重ねた時、マウスカーソルの形状が変化しましたが、下のclassを指定しなかった方はマウスカーソルが変化しません。その場合、視覚的にクリックできるものなのかどうかわかりにくいですよね(^^;)

また、pbCaptionを設定しなかった場合、ポップアップした画像にキャプションが表示されませんｗ ただし、title属性を設定している場合はその内容がキャプションエリアに表示されます。

 

←pbCaptionを設定せず、title属性に値を設定した場合
ポップアップした際、画像の上部，下部にテキストが表示されます。

 

■ Sample2

ポップアップ後のCaptionとRevertTextを非表示定した例です。
下三行がポップアップ後の上部に表示されるテキスト、Closeアイコン等の非表示設定になります。

pbShowCaption="false"
pbShowRevertBar="false"
pbShowRevertImage="false"
pbShowRevertText="false"

 

● 次のページでは、サムネイル画面に表示されるPOPBARについて色々と試してみました。

------
PopBox!使用バージョン 2.7a
更新日：2010/2/3 by みさぱんだ

参考になったよ～という方は拍手ボタン押していただけると嬉しいです♪ web拍手

PopBarについての考察 >>