カテゴリー「Javascript」の一覧

画像をズームするjQueryプラグイン

2008.11.20 木曜日

会社で「こんなの出来るー？」と聞かれて、
面白そうなので試しに作ってみた。

jquery.zoomImg examples

jqurey.zoomImg example01

jqurey.zoomImg example01

$("#zoom01").zoomImg();

デフォルト
マウスオーバーした場所を拡大表示。

jqurey.zoomImg example02

jqurey.zoomImg example02

$("#zoom02").zoomImg("zoomWindow");

引数に表示したいエレメントのIDをつけると、その中で表示。

一応各ブラウザで動作は確認できたけど、試作状態なのでまだ粗はありそう。
あとは、折を見て機能足してみるかな、ドラッグ対応とか。

あと、一個謎が…。
家のWinXPのIE7で動かしてみたら、なんだか凄く動きがカクカクだったので、色々試してたんだけど、
一度、動作数のカウント取ってみようと思って、適当な場所に数値を入れてmousemove()で動く度にカウントアップするようにしてみたら、急にスムーズに動き出した…。
何かしら画面描画すればOKっぽい…？
う～ん、会社のIE7では平気だったような…。

なので、mousemove()で呼ばれるメソッドの中に

$(”#ZI_view”).html(” ”);

という一行を入れてひとまず回避。
なんかちょっと気持ち悪い気がするなぁ…。

タグ: | カテゴリー: Javascript | コメント(0) »

意外とよく使うJavascript　ロールオーバー

2008.8.5 火曜日

(※googleさんのキャッシュから復旧)

小物系です。
ごくありふれたコードだけど、出番は多いので持っておくと便利だし、ってことで。

ロールオーバーイメージの動作自体は、DreamWerverの「スワップイメージ」で簡単に実装できるので、デザイナーさんとかはそっちを昔からよく使ってたけど、
HTMLのソースがかなり凄いことになるので、後で困ることが多いし…。
(ページ更新時、に挿入されたプリロードイメージが、使わなくなった画像の分まで残ったままになってたりとかよくある)
つうことで、なるべくHTML側のソースを汚さない形で作った物を使って貰ってます。

サンプル

ページのロード時に、<img>タグにclass=”rollover”とつけてある物を抽出して、
ファイル名に「_on」がついた画像を裏でプリロード(事前読み込み)しておき、マウスオーバー時に画像差し替え。
(sample.gif→sample_on.gif　sample.jpg→sample_on.jpg)

下記、jQuery併用版とスタンドアロン版があるけど、動きは全く同じ。
こうやって見比べると、jQueryとかってやっぱり便利だなぁって改めて実感…。

jQueryと併用版

他でjQuery使ってる場合とかは主にこっち。

使用方法

  1. <html>
  2. <head>
  3. <script language="javascript" src="jquery.js" type="text/javascript"></script>
  4. <script language="javascript" src="jquery.rollover.js" type="text/javascript"></script>
  5. </head>
  6.  
  7. <body>
  8. <!-- マウスオーバー時にsample_on.gifに差し替え-->
  9. <img src="sample.gif" alt="test" class="rollover"></div>
  10. </body>
  11. </html>

スクリプト

Download: jquery.rollover.js
  1. var preLoadImg = new Object();
  2.  
  3. function initRollOvers(){
  4.     $("img.rollover").each(function(){
  5.         var imgSrc = this.src;
  6.         var sep = imgSrc.lastIndexOf('.');
  7.         var onSrc = imgSrc.substr(0, sep) + '_on' + imgSrc.substr(sep, 4);
  8.         preLoadImg[imgSrc] = new Image();
  9.         preLoadImg[imgSrc].src = onSrc;
  10.         $(this).hover(
  11.             function() { this.src = onSrc; },
  12.             function() { this.src = imgSrc; }
  13.         );
  14.     });
  15. }
  16. $(function(){
  17.     initRollOvers();
  18. });

スタンドアロン版

他のフレームワーク使ってて、jQueryとの併用はなるべく避けたい場合とか、
他にJSを使ってなくて、ロールオーバーの為だけにわざわざjQueryまで…とかそんな場合はこっち。
使用方法

  1. <html>
  2. <head>
  3. <script language="javascript" src="rollover.js" type="text/javascript"></script>
  4. </head>
  5.  
  6. <body>
  7. <!-- マウスオーバー時にsample_on.gifに差し替え-->
  8. <img src="sample.gif" alt="test" class="rollover"></div>
  9. </body>
  10. </html>

スクリプト

Download: rollover.js
  1. function initRollOvers() {
  2.     if (!document.getElementById){
  3.         return;
  4.     }
  5.    
  6.     var preLoads = new Array();
  7.     var allImages = document.getElementsByTagName('img');
  8.  
  9.     for (var i = 0; i < allImages.length; i++) {       
  10.         if (allImages[i].className == 'rollover') {
  11.             var src = allImages[i].getAttribute('src');
  12.             var ftype = src.substring(src.lastIndexOf('.'), src.length);
  13.             var oSrc = src.replace(ftype, '_on'+ftype);
  14.  
  15.             //-- スワップ元、スワップ先画像の登録
  16.             allImages[i].setAttribute('pSrc', src);
  17.             allImages[i].setAttribute('oSrc', oSrc);
  18.  
  19.             //-- イメージのプリロード
  20.             preLoads[i] = new Image();
  21.             preLoads[i].src = oSrc;
  22.  
  23.             //-- イベントの設定
  24.             allImages[i].onmouseover = function() {
  25.                 this.setAttribute('src', this.getAttribute('oSrc'));
  26.             }
  27.             allImages[i].onmouseout = function() {
  28.                 this.setAttribute('src', this.getAttribute('pSrc'));
  29.             }
  30.         }
  31.     }
  32. }
  33.  
  34. function addOnload(func){
  35.     if ( typeof window.addEventListener != "undefined" ){
  36.         window.addEventListener( "load", func, false );
  37.     }else if ( typeof window.attachEvent != "undefined" ) {
  38.         window.attachEvent( "onload", func );
  39.     }else{
  40.         if ( window.onload != null ){
  41.             var oldOnload = window.onload;
  42.             window.onload = function ( e ) {
  43.             oldOnload( e );
  44.             window[func]();
  45.         };
  46.     }else
  47.         window.onload = func;
  48.     }
  49. }
  50. addOnload(initRollOvers);

追記：2008/09/22
超暫定版！エム・アールデザイン ブログ » シンプルなコードでロールオーバーを実現する。様の方でトラックバックを頂き、そちらでの指摘で気がついたのですが、
先日データが飛んでgoogleキャッシュから復旧した際にソースが一部古くなっていたようです。
あとでコッソリ直していた、onloadのバッティングを回避する処理が無くなっていたので修正しました。

タグ: | カテゴリー: Javascript | コメント(2) »

jQuery historyプラグインが素敵だったのでサンプル作成

2008.7.1 火曜日

Ajaxで表示しているページに、ブラウザの「戻る」「進む」とブックマークを対応させるjQueryプラグイン

Ajaxでタブ切り替え+リスト表示+ページ切り替えというページを作っていて、
タブやページを切り替えた状態を、アンカーリンクで直接指定できるようにはしてあったんだけど、

「これ、historyの履歴に入れられないかなぁ」
と思って検索してたら、素敵なjQueryプラグインを発見。

history plugin
作者様の記事：みかログ: Ajaxと戻るボタン・ブックマーク

DLページにサンプルがあって、そちらのソースで充分把握できるほど使いやすいプラグインですが、
実働に近い感じのサンプル作ってみたので、置いておきます。

まずは、シンプルにタブ切り替え

Ajaxで、タブ毎に別のcsvファイルを読み込んでリスト表示。
タブ切り替えをhistoryに入れてブラウザの「戻る」「進む」に対応。

タブ切り替え+ページ切り替えに拡張

ページ切り替え機能を追加して、ページ毎にhistoryに残るようにしました。

使い方

※予め、アンカーリンク(URLの#以降)を用いて状態が復元できるようにしておく必要があります。

onLoadや$(document).ready等で、

$.historyInit(function);
//function = コールバック関数

を実行して初期化しておき、
アンカーリンクの入ったaタグに、clickイベントで

$.historyLoad(hash);

hash = アンカー文字列
をバインド。

上記のサンプルでは、こうなっています。

  1. $(function(){
  2.     $.historyInit(chgView);
  3.     $('a.tab').click(function(){
  4.         var hash = this.href;
  5.         hash = hash.replace(/^.*#/, '');
  6.         $.historyLoad(hash);
  7.         this.blur();
  8.         return false;
  9.     });
  10. });

コールバック関数は、アンカーの文字列を引数として受け取り、
その文字列に応じて状態を再現するように作ってておけばOK。

上記のサンプルでは、
#chevrolet
#bmw
#aston
で、タブの状態を再現し、

ペ－ジ切り替えがある際は、-(ハイフン)でページ番号を繋いで、
#chevrolet-2
等というアンカーにして、
もしアンカーに-(ハイフン)が入っていたら、分割してタブとページの両方を再現するようになっています。

タグ: | カテゴリー: Javascript | コメント(0) »

ThickBoxをカスタマイズしてみる

2008.6.12 木曜日

最近、Javascriptのライブラリは専らjQuery派なので、
画像とかをポップアップで出すときはThickBoxを使うことが多いです。

この手のライブラリはLightBoxも有名だけど、
ThickBoxは画像だけじゃなくてHTMLの表示とかにも使えて便利。

大体、普段は見た目だけカスタマイズしてそのまま使ってるんだけど、
表示の際にパッと出てきたり、
画像をグループ化してギャラリー表示する時、一旦消えてパッと切り替わる挙動が若干気になったので、
ちょっと中身いじって、試しにLightBoxっぽくアニメーションするようにしてみる。

サンプル
サンプルのソース

ひとまずお試しなのでそんな対した改変はしてなくて、
表示をするtb_show()関数を2つに分けて、

tb_open() { 黒背景＆表示枠を表示 }
↓
tb_show() { リサイズアニメーション＆中身表示 }

として、
ページ切り替え時は、表示枠を消さずにtb_show()を実行させることでそのままリサイズに繋げてます。
いじったのは画像表示部分だけなので、その他(HTML表示とか)は恐らくそのまま動くはず…。

jQueryのanimate()をそのまま使用しただけなので、イージングもされてないし動きが固い。
LightBoxくらいまで派手にエフェクトさせるのはちょっとやり過ぎだとは思うけど、もうちょっと何とかすべきかな…。
あと、検証も超不十分。

また時間ある時にちゃんと作ります。

＃追記
2008.06.13 ちと改良。

タグ:, | カテゴリー: Javascript | コメント(0) »