POPSブログ

jQuery POPS-iBOX シミュレーション

146

  Category:  jquery2012/09/16 pops 

角丸陰影画像を外周に配置した「伸縮するパネル」を利用して伸縮表示する「LightBox」pops-ibox-3a の「シミュレーション」を行います。


「pops-ibox-3a」シミュレーション

新しい、iBOXの、JS設定の変更でどのように変化するかを確認するための、シミュレーションです。「pops-ibox-3a」は 特集記事 iboxページ で公開している、jQuery LightBox風 プラグインです。


画像とともに伸縮する「iBOX」のシミュレーション


下の画像を「クリック」ください。拡大して表示します。

jQuery 伸縮するパネル/4 角丸陰影画像を外周に配置した「伸縮するパネル」を利用して伸縮する「LightBox」の「シミュレーション」を行います。 2xxxxxxxxxxxxxxxxxx 3モード、fade:画像のみフエード、all:全体をフエード、 move:フエードと拡大が同時。moveのみ指定位置に戻ります。拡大モードに設定されている場合のみ、拡大率が有効。但しブラウザの大きさにより表示は異なります。
4xxxxxxxxxxxxxxxxxx

[サムネール無1]



以下の条件の「切り替え変更」が、シミュレーションできます。(IE6には対応していません)

MOVE / FADE 位置切替 スケール 速度切替 レーヤ色 レーヤ使用
move
center
600
#000000
use
MOVEFADE 画像中央 11.22 標準遅く 使用未使用

FADEモード EM文字表示 ページャー 拡大ボタン コントロール コントロール2
fade
use
use
use
none
use
fadeallmove usenone usenone usenone usenone usenone

サムネール表示 - - - - -
use
-
-
-
-
usenone

1. 注意。iBox は位置切替は image/center どちらもできます。フエードは3種類のモード選択可能。
2. モード、fade:画像のみフエード、all:全体をフエード、 move:フエードと拡大が同時。
3. 拡大モードに設定されている場合のみ、拡大率が有効。但しブラウザの大きさにより表示は異なります。
4. コントロール( [PAGER] [NEXT/PREV] )は 3種用意されています、通常1種選定します。表示位置が違いますので複数使用可能です。


説明図



特集記事 iBOX ページに戻る


以上です。


[ この記事のURL ]


タグ:jquery , LightBox

 

ブログ記事一覧



[1]