tsukalogo0000


alt
jQueryライトBOX系仕様

リッチスタイルのライトボックスが手軽に機能するFancyBoxを使ってみた。グループ単位で切り替えて画像を繰っていく事が可能。しかしデモでは自動送りになっていなかった。
前ページのサンプル→http://www.tsuka-time.com/illustration.html

alt

もう一つは比較的シンプルなjQueryのSlideshow。設定jsとcssスタイルでシンプルに動く。こちらはページ自体にデータを梱包するのであまり画像を詰め込み過ぎると動きが鈍くなるみたい。

alt前ページのサンプル→http://www.tsuka-time.com/illustslideshow2.html

●参考/Ajax,Javascript、コンテンツを効果的に表現するスクリプトサンプル設置方法
巷に溢れる定番ツールの紹介。画像のポジションを固定してスライドするタイプ等
●参考/jQueryを使ったシンプルなスライドショー
●参考/JavaScriptで画像ギャラリーを作る「jQuery slideShow plugin」
●参考/jQueryを使用したシンプルなスライドボックス
●参考/Lightbox風のスクリプトFancyBox。
●参考/ポラロイド写真を並べたようなギャラリー
iphoneでflashが機能しない代替のためのjava=fancyBoxなのだが、そもそもセンターを認識しないタッチパネル機能ではプレビュー画面が右へ右へズレていく。一方スライドショーの方はCSSで画面を固定するのでiphone含め比較的汎用性は高そう。但し古いブラウザでは最後の画像だけ読んで止まっちゃうが… 画像の詰め込み過ぎは厳禁らしくflashとの使い分けが必要だろう。

alt




《iphone画面》
ライトボックスのプレビュー画面
はおろかマスクも切れてしまう始末。
そもそもタッチパネル方式は
センタリングを認識出来ない
ので仕方ないのかも…。




 
alt
jQueryのColorBoxを設置

alt
iphoneで位置がままならない事や少しテイストが違う気がしたのでFancyBoxからcolorboxに入れ替えて見た。様々な方がこの問題と格闘されてますがこのプラグイン評価は高く同じjQuary同士だと入れ替えも手間が掛からないしgoodデス。●colorbox.css、 ●jquery-1.4.2.min.js、●jquery.colorbox-min.jsの3つを読み込み主にボックスの中の文字配列はcssで管理してます。
しかし文字内容はjquery.colorbox.jsの方で管理されていて流石にmin=圧縮1/2では触りにくい。
alt本HPのサンプル→スライドショー:true使用。表示方法はフェードタッチ等ヴァリエーションがiphone多数。しかしいざ使用してみると、やはりiphoneでは 右altへ右へズレていく(涙)。どうしてもイラストを拡大しながらプレビューさせるケースがあるのでiphoneの性能上いた仕方ないみたい。(アルキメデスの亀みたく延々センタリングできない)もともとiphone用ページは別途用意してるのでそこに自動アクセス出来ないかしらと探したら。やっぱりありました!以前からFrashやらなんやらで、別ページに回避したかったので非常にカンゲキです。
クロスプラウザ化と共にiphone描画の快適化を模索していたのでCSS対応以外ではひとつ目的をクリア。但しあくまでもテキストオンリーの無機質な iphone専用ページを用意するつもりは全く無くてあくまで直感的にストレスなく閲覧できる統合されたページ作りが理想。(このプラグインはOpera に関しては80Kビォ超える容量のファイルはプレビュー出来ない事が判明した)
●参考/ライトボックスの評価
●参考/iphoneユーザーの誘導コード

<!-- colorBox設定 -->
 
<!-- if ( navigator.userAgent.indexOf('iPhone') != -1) {
if(confirm('iPhone向けのページを表示しますか?')){
location.href = "http://www.tsuka-time.com/illustration.html";
} } //-->

 
alt
jParallaxの設置

使い方次第でかなり視覚効果が高いツール。もちろんイラストの質と遠近感の計算及びそのスピードはかなり計算が必要。透過の切り抜きも細心の注意が必要。
DEMO1………このHPメニューページのメインビジュアル
近づくにつれ景色が左右に広がる効果※左右のサイズが足りずそんなに効果が望めなかったが
DEMO2………WebDesignのメインビジュアル
景色が平行に移動する場合遠くは遅く、近くは早く移動して遠近感を出す効果demo

<!-- jParallax設定例 --><!-- jParallax設定例 -->
<link href="jquery-ui/jParallax/jParallaxbase2.css" rel="stylesheet" type="text/css">
<script src="jquery-ui/scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery-ui/jParallax/jquery.jparallax.js" type="text/javascript"></script>
 
 $(function() {
 var corners = '<img src="image/illustraition/corner_white_tl.png">' +
 '<img src="image/illustraition/corner_white_tr.png">' +
 '<img src="image/illustraition/corner_white_bl.png">' +
 '<img src="image/illustraition/corner_white_br.png">';
 $('#parallax').jparallax({
 xparallax: true,
 yparallax: false,
 frameDuration: 50      
 }).append(corners);
 });

角丸の設定がなされてある。ベースのCSSとjQuery、jParallax本体のCSSで構成される。 id名はもちろん照会出来る様にしておく。5.

<!-- jParallax画像設定例 -->
<div id="parallax0">
<div style="width: 250px; height: 273px;">
<img src="image/illustraition/message0100.gif" 
alt="" style="position: absolute; left: -235px; top: 37px;" border="0">
</div>
</div>

divスタイルの幅で元のサイズに対しての相対的なスピードが決定される。
イメージは動画の場合gifを大きい画面で綺麗なグラデーションを求めるならばpngファイルを使用する。但しIE6以下はpngの透過効果は蹴られてしまうので背面で使った方が無難である。ちなみにIE以下でも動くが、iPhoneでは指に感応するのでその効果は発揮されない。
スタイルポジションでは上からの位置であるtopとleft、rightで左右どちら方向から動くかを決定する。例えばleftの数値100は開始位置の数値。



画像を透過にして読み込むみdreamweaver上でリサイズすると透過部分を無視されてしまう(グリーン矢印部分)もちろんブラウザ上では透過部分が反映されるので問題はないのだが、
dreamweaverでもリアルサイズを保持する技としては、少し原始的なのだが本当に小さな(目立たない)有色ドットをコーナーに埋めておけば左右上下範囲のサイズを保持できる。
特にJavaを切った場合や古いブラウザでは透過部分は完全に無視されプレビューされたり、それぞれパーツの元サイズとの整合性はもちろん位置指定であるtopや左右の数値は0でも入力して置く事が幅広いクロスブラウザを達成するにはベターである。
※いずれにしても、pngとgifの色調のズレにはじまりCSS、ビヘイビアの問題を含め限界はあります…safari2.0×以下やIE5.5以下はこの手のプラグインは体裁を繕うのみで機能としては完全にお手上げ。

 
alt

tipsyツールチップ

jQueryの tipsy(0.1.7)意外と使いそうで使わないこのプラグイン。入れるとページがうるさくなるし補足しないとダメなら、もっと他の方法でフォローしてあげたい。ユーザビリティとしてはどこまで訪問者側の気持ちに立って使い易くするのか?は議論すべきなところ。もちろん補助ツールなので、アクシビリティな考えでは有効なのだが…。いずれにしても他のビヘイビアとの併用は出来ないので、純粋なテキストのみに使いたい。

DEMO1

DEMO2

DEMO3

DEMO4

DEMO5

<!-- ツールチップjs設定 -->
<script type ="text/javascript" src="jquery-ui/scripts/jquery-1.3.2.min.js"></script>
<script type ="text/javascript" src="jquery-ui/tipsy/docs/javascripts/jquery.tipsy.js">
</script>
 <!-- ツールチップcss設定 -->
<link rel ="stylesheet" href="jquery-ui/tipsy/docs/stylesheets/tipsy.css" type="text/css">
<link rel ="stylesheet" href="jquery-ui/tipsy/docs/tipsy-docs.css" type="text/css">

を</head>要素に埋め込む

<!-- ツールチップ設定例 -->
<script type="text/javascript">
$(function() {
 $('#example-1').tipsy();
$('#example-2').tipsy();
$('#example-3').tipsy();
$('#north').tipsy({gravity: 'n'});
$('#south').tipsy({gravity: 's'});
$('#east').tipsy({gravity: 'e'});
$('#west').tipsy({gravity: 'w'});
$('#auto-gravity').tipsy({gravity: $.fn.tipsy.autoNS});
$('#example-fade').tipsy({fade: true});
$('#example-fade-1').tipsy({fade: true});
$('#example-fade-2').tipsy({fade: true});
$('#example-fade-3').tipsy({fade: true});
$('#example-custom-attribute').tipsy({title: 'id'});
$('#example-callback').tipsy({title: 
function() { return this.getAttribute('original-title').toUpperCase(); } });
$('#example-fallback').tipsy({fallback: "Where's my tooltip yo'?" });
$('#example-html').tipsy({html: true });
});
</script>

本文記述のid部分がアローの位置方向やフェードがかかったりとそれぞれの特徴に合わせて表現される。文字組、背景色などがツールチップCSSに依存される事となる。
とにもかくにもスクリプトを3つ以上組むと極端にパフォーマンスが悪くなりこのページのYSlowの評定が69のD判定だった。組み方にもよるがjQueryは一発芸的な大技として1つ小技として2つ目を基準に拡張していくべきなのかも。

 
   
 
<< 最初 < 1 2 > 最後 >>
2 / 2 ページ