POPSブログ

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

148

  Category:  jquery2012/09/22 pops 

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


「pops-ibox-3c」グループ設定形式、シミュレーション2

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


画像とともに伸縮する、グループ設定形式「iBOX」のシミュレーション2


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

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

[サムネール無1]

7xxxxxxxxxxxxxxxxxx
[GROUP2]
8xxxxxxxxxxxxxxxxxx
[GROUP2]
9xxxxxxxxxxxxxxxxxx
[GROUP2]


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

● グループ設定形式です。グループ化したページャーを作ります。ページャー=groupはグループ化のものだけページャーを表示します。一部クロスフェード形式対応。
● グループにするには、下記設定の「グループ」を use にしてください。


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

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

サムネール表示 Easing グループ HOVERタイトル ページャー形式 自動LOAD
use
swing
none
none
number
none
usenone SwinglinearBounceBack usenone usenone numberbtn usenone

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

グループ設定があった場合、関連リンクのみ作成。PREV/NEXTも同様です。


説明図



追加機能の説明

POPS-iBOX-3C は、POPS-iBOX-3A と比較して以下の点など追加機能があります。

説明図

1.グループ指定を有効にします。グループの分類などを行います。
2.HOVERタイトルは通常ページャー表示の場合表示しませんので。トップエリアHOVER時にタイトルを表示します。
3.ページャー形式は、番号、ボタン画像の指定をおこなえます。「ボタン画像」指定の場合は使用者がCSSを訂正ください。
4.自動LOADは表示を順次自動で行うモードです。「AUTO」入り切りボタンを表示しますので、「クリック」することにより「現在表示画像」の「次ぎの画像」を表示してゆきます。最後になれば1番目に戻ります。停止には「AUTO」ボタンを再度「クリック」する。又は、何らかのほかのボタン操作で解除になります。
5.Easingはアニメ時のイージングです。swing linear はjquery内臓のイージング、easeOutBounce easeOutBack はこのJSの内臓のイージング機能です。easing.jsの読み込みは不要です。但し、イージングが機能するのは、view_type=move の時に限定されます。


pops-ibox-3a の「シミュレーション」は下記になります。

【参考 シミュレーション】当方の記事: POPS-iBOX-3A のシミュレーション



特集記事 iBOX ページに戻る


以上です。


[ この記事のURL ]


タグ:jquery , LightBox

 

ブログ記事一覧



[1]