PopBoxテストページ

▼まずは、普通に表示してみる

<img class="PopBoxImageSmall" alt=""
	src   ="samples/thm01.jpg"
	pbsrc ="samples/img01.jpg"
	pbCaption ="この部分がキャプション"
	onclick ="Pop(this, 100, 'PopBoxImageLarge')" />

▼pbShowCaptionをfalseにしてみる

<img class="PopBoxImageSmall" alt=""
	src   ="samples/thm02.jpg"
	pbsrc ="samples/img02.jpg"
	pbCaption ="この部分がキャプション"
	pbShowCaption ="false"
	onclick ="Pop(this, 100, 'PopBoxImageLarge')" />

▼pbRevertTextを指定してみる

<img class="PopBoxImageSmall" alt=""
	src   = "samples/thm03.jpg"
	pbsrc = "samples/img03.jpg"
	pbCaption = "この部分がキャプション"
	pbRevertText = "この部分がpbRevertTextです"
	onclick = "Pop(this, 100, 'PopBoxImageLarge')" />

▼pbShowRevertBarを無しにしてみる

<img class="PopBoxImageSmall" alt=""
	src   = "samples/thm03.jpg"
	pbsrc = "samples/img03.jpg"
	pbCaption = "この部分がキャプション"
	pbShowRevertBar = "false"
	pbRevertText = "このRevertTextの背景に注目！"
	onclick = "Pop(this, 100, 'PopBoxImageLarge')" />

▼pbShowPopBarってなんだ?

※画像を拡大させてから縮小すると発生

<img class="PopBoxImageSmall" alt=""
	src   = "samples/thm04.jpg"
	pbsrc = "samples/img04.jpg"
	pbCaption = "この部分がキャプション"
	pbShowPopBar = "true"
	pbPopImage = "images/c6Sred.jpg"
	pbPopText  = "これはpopしたよ"
	onclick = "Pop(this, 100, 'PopBoxImageLarge')" />

サンプル２．グローバル変数関連

グローバル変数の値ををいろいろ設定してみたサンプル
onclickの時点でグローバル変数の値をセットして関数を実行させています。

▼popBoxAutoCloseをfalseにすると...

※こちらクリックで閉じれます

<img class="PopBoxImageSmall" alt="" id="popboxautoclose"
	src   = "samples/thm05.jpg"
	pbsrc = "samples/img05.jpg"
	pbCaption = "<a href='javascript:popBoxAutoClose_endfunc()'>
		こちら</a>クリックで閉じれます"
	onclick = "popBoxAutoClose_startfunc()" />
<script type="text/javascript">
function popBoxAutoClose_startfunc() {
	if (document.getElementById('popcopy'+'popboxautoclose') != null) return;
	popBoxAutoClose = false;
	Pop('popboxautoclose', 100, 'PopBoxImageLarge')
}
function popBoxAutoClose_endfunc() {
	popBoxAutoClose = true;
	Revert('popcopy'+'popboxautoclose', 100, 'PopBoxImageSmall');
}
</script>

▼popBoxCaptionBelowをfalse、popBoxWaitImage.srcを設定すると...

※こちらクリックで閉じれます

<img class="PopBoxImageSmall" alt="" id="popboxautoclose"
	src     = "samples/thm06.jpg"
	pbsrcNL = "samples/img06.jpg"
	pbCaption = "<a href='javascript:popBoxCaptionBelow_endfunc()'>
		こちら</a>クリックで閉じれます"
	onclick = "popBoxCaptionBelow_startfunc()" />
<script type="text/javascript">
function popBoxCaptionBelow_startfunc() {
	if (document.getElementById('popcopy'+'popboxcaptionbelow') != null) return;
	popBoxAutoClose = false;
	popBoxCaptionBelow = true;
	popBoxWaitImage.src = 'images/c6Sred.jpg';
	Pop('popboxcaptionbelow', 100, 'PopBoxImageLarge');
}
function popBoxCaptionBelow_endfunc() {
	popBoxAutoClose = true;
	popBoxCaptionBelow = false;
	Revert('popcopy'+'popboxcaptionbelow', 100, 'PopBoxImageSmall');
}
</script>

▼popBoxRevertBarAboveを設定すると...

※こちらクリックで閉じれます

<img class="PopBoxImageSmall" alt="" id="popboxautoclose"
	src   = "samples/thm07.jpg"
	pbsrc = "samples/img07.jpg"
	pbCaption = "<a href='javascript:popBoxRevertBarAbove_endfunc()'>
		こちら</a>クリックで閉じれます"
	onclick = "popBoxRevertBarAbove_startfunc()" />
<script type="text/javascript">
function popBoxRevertBarAbove_startfunc() {
	if (document.getElementById('popcopy'+'popboxrevartbarabove') != null) return;
	popBoxAutoClose = false;
	popBoxRevertBarAbove = true;
	Pop('popboxrevartbarabove', 100, 'PopBoxImageLarge');
}
function popBoxRevertBarAbove_endfunc() {
	popBoxAutoClose = true;
	popBoxRevertBarAbove = false;
	Revert('popcopy'+'popboxrevartbarabove', 100, 'PopBoxImageSmall');
}
</script>

▼popBoxPopBarAboveを設定すると...

※画像を拡大させてから縮小すると発生

※こちらでtrueに変更できます
※こちらでfalseに戻せます

<img class="PopBoxImageSmall" alt="" id="popboxautoclose"
	src   = "samples/thm08.jpg"
	pbsrc = "samples/img08.jpg"
	pbCaption = "この部分がキャプション"
	pbShowPopBar = "true"
	pbPopImage = "images/c6Sred.jpg"
	pbPopText  = "これはpopしたよ"
	onclick = "Pop(this, 100, 'PopBoxImageLarge')" />
<script type="text/javascript">
function set_popBoxCaptionBelow(setting) {
	popBoxPopBarAbove = setting;
}
</script>

PopBoxのサンプル

サンプル１．属性関連

サンプル２．グローバル変数関連