Just another WordPress weblog
画像ギャラリーを作る際に便利に使えそうなjQueryの画像ギャラリー実装プラグイン37種
1月 7th
画像ギャラリーを作る際に便利に使えそうなjQueryの画像ギャラリー実装プラグイン37種がまとまったエントリのご紹介。
新しいものから古いものまでいろいろとまとまっているようです。
カバーフローみたいなギャラリー実装プラグイン

なかなかクールなサムネイル付きギャラリー実装プラグイン

UIがクールなギャラリー実装プラグイン


ギャラリー用のプラグインはすでに多数ありますが、色々と覚えておくのも引き出しを増やしておくという面でよいかもしれませんね。
以下のエントリを参照してください。
37 Fresh jQuery Image And Gallery Display Solutions | Graphic and Web Design Blog -Resources And Tutorials
関係ある記事なので是非読んでください
ページ内に雪を降らせられるjQueryプラグイン「jSnow」
12月 22nd
ページ内に雪を降らせられるjQueryプラグイン「jSnow」。
好きな文字をページ内に雪を降らせたような感じで浮遊させることができます。

デモページを見てみましょう

使い方は簡単で、flakeCode に配列を指定すると文字が指定でき、flakeColor 指定で色を指定できます。
$().jSnow({flakes:30,flakeCode:["♠","♣"],flakeColor:["#f00","#00f"]});
ちょっとしたドッキリエフェクトとして覚えておくと使えるかもしれませんね。
以下のエントリを参照してください。
jSnow, a jQuery plugin for creating falling snow effect on your website | DuMmWiaM.com
関係ある記事なので是非読んでください
ページフッターにプロモーション枠を簡単挿入できるjQueryプラグイン「MEERKAT」
12月 21st
ページフッターにプロモーション枠を簡単挿入できるjQueryプラグイン「MEERKAT」

次のようにページフッターを乗っ取ってバナーなどを表示できます。

他にも、入口画像を用意しておいてクリックするとフェードしながらページに遷移させる機能なんかもあります。

クリックでページにフェードアニメーションしながら切り替わります。

以下のエントリを参照してください。
Meerkat – A jQuery Plugin
関係ある記事なので是非読んでください
jQueryで複数の画像を立体表示できる「jQuery Image Cube」
12月 8th
jQueryで複数の画像を立体表示できる「jQuery Image Cube」。
無茶しやがって、、という感じのJavaScript ですが(^^;)、なかなかおもしろいので紹介。
次のように、画像を立体的にして回転させるなんていうことがjQueryとの組み合わせで簡単に実現出来ます。

実装は次のように1行で実装可能。
$(’#defaultCube’).imagecube();
一昔前のGIFアニメで無理やり画像を回転させてるのを思い出しました。
以下のエントリを参照してください。
jQuery Image Cube
関係ある記事なので是非読んでください
ユニークで使えそうなjQueryプラグイン10個
11月 29th
ユニークで使えそうな jQueryプラグイン10個。
プラグインといえば、タブやLightboxといった定番のものから、他にも役立つものが色々とありますが、紹介されているものはどれも便利そうでしたのでいくつかご紹介。
Impromptu
LightBox風に、OK・Cancel のダイアログを表示できます。

Captify
画像の下部に半透明の背景付きキャプションを表示。アニメーションしていい感じ

Favico
リンクに自動でfaviconを付けてくれる

jQuery BreadCrumb
アニメーションして使いやすいパンくずリスト

jQuery Spotlight
特定のブロック要素以外にオーバーレイして特定のブロックを目立たせます

jQuery Peel
ページがペラっとめくれたような驚きのエフェクトをページに付けられます

これらを駆使すれば、ユーザビリティの向上に役立てられそうです。
関係ある記事なので是非読んでください
jQueryの設置
11月 26th
設置
ダウンロードしたファイルはHTML内で次のように読み込み利用します。
<html>
<head>
<script type="text/javascript"
src="path/to/jquery.js"></script>
<script type="text/javascript">
// ここに自分のコードを書きます
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
(「path/to/」の部分は、そのファイルへのパスを書きます)
もし、プラグインやjQuery UIなどの.jsを使うなら次のようにjquery.jsの後に記述します。
<html>
<head>
<script type="text/javascript"
src="path/to/jquery.js"></script>
<script type="text/javascript"
src="path/to/プラグインやjQuery UIなどの.js"></script>
<script type="text/javascript">
// ここに自分のコードを書きます
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
これで、設置は完了で、もうjQueryを使い始めることができます。
jQueryのライセンスは、MITとGPLのデュアルライセンスで自分のプロジェクトに合うライセンスを選んでそれに従って使用できるという、最近はやりのスタイルです。 ライセンス文言はダウンロードしたファイルにすでに書いてありますので、そのまま利用する側が特にすることはありません。
次回もjQueryについて書いてみます。実は、このシンプルなjQueryを実現する水面下には多くのJavaScript Tipsが隠されているのです。
関係ある記事なので是非読んでください
jQueryのダウンロード
11月 26th
jQueryのダウンロード
jQueryを入手するには、まず、http://jquery.com/へ行きます。 
このサイトのダウンロードページには、 YUI Compressor による圧縮版(jquery-1.2.xx.min.js )と Packedによる圧縮版(Packed jquery-1.2.xx.pack.js )と ここに非圧縮版(Uncompressed jquery-1.2.xx.js )が置かれています。
非圧縮版はソースを確認するのに便利ですが、実際に使用するときは圧縮版を使用します。 圧縮率自体ではPacked(27k)が優れていますが、 Packerの冗長減少アルゴリズムでは実行時にevalも必要であるため多少実行に遅れが出ます。 jQueryのダウンロードトップに置かれているYUI Compressorによる圧縮+gzipによるHTTP圧縮 (14k) という手も優れた選択肢だと思います(参照 Gzip Your Minified JavaScript Files )。また、SVNでの取得も可能です。
さて、jQueryの本体は、わずかにこの小さなjsファイルひとつです。この中に、さまざまなエフェクトを含むメソッドが入っています。 これを、自分のスクリプトの前に読み込めば使えるようになります。
また、jQueryは、それ単独でもAjax機能はもとより、prototype.jsのscript.aculo.usやYUIのアニメーションクラスに一部相当する フェイドインやスライド、アニメイト機能が備わっていますが、それらをさらに拡張するライブラリとして、 jQuery UIとプラグインが用意されています。
jQuery UIには、ドラッグドロップ、リサイズ 、アコーディオン、ピッカー、ダイアログ、ソーターテーブルなどのウィジェットが含まれて おり、プラグインには、ユーザーが自分で拡張できる仕組み(Plugins)を利用したさまざまなジャンルのスクリプトが登録されています。
これらも、それぞれのサイトでダウンロードできますので、jQuery本体と組み合わせて利用することになります。
関係ある記事なので是非読んでください
Allabout Tips
11月 11th
jQueryの特徴
jQueryは、最近急速に人気を増してきているJavaScriptライブラリです。
短いコードで多くの処理を安全で簡単に実行できる優れたライブラリのひとつです。
jQueryは、きわめて簡潔な表現で多彩な機能を実現することに成功しています。
もし、DIVで"testClass"というクラス名のついた要素だけを選んで、
文字色を赤にしようとしたら、一般的なJavaScriptでは、
いろいろな書き方はありますが、たとえば、次のような書き方になります。
<div class="testClass">DIVでtestClassです</div>
<div class="testClass">DIVでtestClassです</div>
<div class="testClass">DIVでtestClassです</div>
<div class="noTestClass">DIVでnoTestClassです</div>
<p class="testClass">PでtestClassです</p>
<script type="text/javascript">
var divs= document.getElementsByTagName("DIV");
for(var i=0;i<divs.length;i++){
if((
divs[i].getAttribute("className")||
divs[i].getAttribute("class")
)=="testClass"){
divs[i].style.color="red";
}
}
</script>
まず、DIVタグを検索し、それを順番にforで回しながら、
クラス名(class、IEならclassName)が"testClass"である
要素を判定してから「style.color="red"」を適用しています。
これをjQueryで書くとこうなります。
<script src="./jquery.js" type="text/javascript">
<div>DIVでtestClassです</div>
<div>DIVでtestClassです</div>
<div>DIVでtestClassです</div>
<div>DIVでnoTestClassです</div>
<p>PでtestClassです</p>
<script type="text/javascript">
$("DIV.testClass").css("color","red");
</script>
前者ではブラウザ分岐まで含めて何行程もあった処理が、
わずか1行で済んでしまっています。これが、jQueryです。
$("DIV.testClass")は、おなじみのCSSセレクタ文字列を利用したDOM要素検索(注1)になっています。
そのメソッド.css("color","red")の引数もCSSの書き方を知っている方なら
ほぼ、直感的に記述できる書き方が採用されています。
(注1 : ただし、後述しますが、戻り値はDOM要素ではなく
jQueryオブジェクトですので$("DIV.testClass").innerHTMLのような使い方はしません。)
もちろん、これだけならCSSで書けば済むわけですが、jQueryの魔法は、ここからです。
魔法のメソッドチェーン
jQueryは、JavaScriptですから、CSSだけではできないいろいろなプログラム
処理を行うことができます。これらの検索したDOM要素の文字列にさらに処理を
加える場合には、たとえば、次のようにします。
$("DIV.testClass").css("color","red")
.html("DIVでtestClassを発見しました")
.animate({fontSize: "2em"},2000 );
これで、検索したDOM要素のコンテンツの中身の
- 文字色を赤にして、
- HTMLを "DIVでtestClassを発見しました" に置き換えて、
- さらに、フォントサイズを 2秒 かけて "2em" まで拡大します。
そして、jQueryの面白いところは、たとえば、次のようにメソッドの
順番を取り替えても動作することです。
$("DIV.testClass").animate({fontSize: "2em"},2000 )
.css("color","red")
.html("DIVでtestClassを発見しました");
これは、それぞれのjQueryオブジェクトのメソッドの戻り値の多くが
jQueryオブジェクトになっているからです。つまり、使いたいメソッド
を「.」でつないでいくだけで、まるでレゴを組み立てるようにプログラムが書きあがるというわけです。
これは、メソッドチェーンと呼ばれている仕組みです。
これにより、検索済みの要素に対するさまざまなメソッド処理を行うたびに、
その頭に divs.メソッド名1();divs.メソッド名2();
... などと繰り返し記述する必要もなくなり、きわめて短いコードで、多くの処理を簡潔に記述できるようになります。
jQueryの特徴 jQueryは、最近急速に人気を増してきているJavaScriptライブラリです。 短いコードで多くの処理を安全で簡単に実行できる優れたライブラリのひとつです。 jQueryは、きわめて簡潔な表現で多彩な機能を実現することに成功しています。 もし、DIVで"testClass"というクラス名のついた要素だけを選んで、 文字色を赤にしようとしたら、一般的なJavaScriptでは、 いろいろな書き方はありますが、たとえば、次のような書き方になります。<div class="testClass">DIVでtestClassです</div> <div class="testClass">DIVでtestClassです</div> <div class="testClass">DIVでtestClassです</div> <div class="noTestClass">DIVでnoTestClassです</div> <p class="testClass">PでtestClassです</p> <script type="text/javascript"> var divs= document.getElementsByTagName("DIV"); for(var i=0;i<divs.length;i++){ if(( divs[i].getAttribute("className")|| divs[i].getAttribute("class") )=="testClass"){ divs[i].style.color="red"; } } </script>まず、DIVタグを検索し、それを順番にforで回しながら、 クラス名(class、IEならclassName)が"testClass"である 要素を判定してから「style.color="red"」を適用しています。 これをjQueryで書くとこうなります。 <script src="./jquery.js" type="text/javascript"> <div>DIVでtestClassです</div> <div>DIVでtestClassです</div> <div>DIVでtestClassです</div> <div>DIVでnoTestClassです</div> <p>PでtestClassです</p> <script type="text/javascript"> $("DIV.testClass").css("color","red"); </script> 前者ではブラウザ分岐まで含めて何行程もあった処理が、 わずか1行で済んでしまっています。これが、jQueryです。 $("DIV.testClass")は、おなじみのCSSセレクタ文字列を利用したDOM要素検索(注1)になっています。 そのメソッド.css("color","red")の引数もCSSの書き方を知っている方なら ほぼ、直感的に記述できる書き方が採用されています。 (注1 : ただし、後述しますが、戻り値はDOM要素ではなく jQueryオブジェクトですので$("DIV.testClass").innerHTMLのような使い方はしません。) もちろん、これだけならCSSで書けば済むわけですが、jQueryの魔法は、ここからです。魔法のメソッドチェーン
jQueryは、JavaScriptですから、CSSだけではできないいろいろなプログラム 処理を行うことができます。これらの検索したDOM要素の文字列にさらに処理を 加える場合には、たとえば、次のようにします。$("DIV.testClass").css("color","red") .html("DIVでtestClassを発見しました") .animate({fontSize: "2em"},2000 );これで、検索したDOM要素のコンテンツの中身の
- 文字色を赤にして、
- HTMLを "DIVでtestClassを発見しました" に置き換えて、
- さらに、フォントサイズを 2秒 かけて "2em" まで拡大します。
$("DIV.testClass").animate({fontSize: "2em"},2000 )
.css("color","red")
.html("DIVでtestClassを発見しました");
これは、それぞれのjQueryオブジェクトのメソッドの戻り値の多くが
jQueryオブジェクトになっているからです。つまり、使いたいメソッド
を「.」でつないでいくだけで、まるでレゴを組み立てるようにプログラムが書きあがるというわけです。
これは、メソッドチェーンと呼ばれている仕組みです。
これにより、検索済みの要素に対するさまざまなメソッド処理を行うたびに、
その頭に divs.メソッド名1();divs.メソッド名2();
... などと繰り返し記述する必要もなくなり、きわめて短いコードで、多くの処理を簡潔に記述できるようになります。