画像ギャラリーに良さそうなjQueryプラグイン

画像の一部について、詳細に説明したい場合に使える「iPicture」をご紹介。
この写真のこの人が○○でさー、この右下のコレが○○だったんだー。
という説明をマウスオーバーすると表示できるようになります。

Flickrなんかでも、画像の上に説明を載せれたりしますよね。
いつか使うかもしれないので一応メモ。

iPicture

アイコンにマウスオーバーすると簡単な説明が表示されます。
スライドショーやギャラリーに組み込むと良さそうですね

コードは以下のような感じになるそうです。

  jQuery(document).ready(function(){
    $( "#iPicture" ).iPicture({
      pictures: ["picture1","picture2","picture3", ...all pictures' ID],
      moreInfos:{
        "picture1":[
          {"id":"picture1-more1","descr":"led for better lighting ","top":"307px","left":"367px"},
          {"id":"picture1-more3","descr":"exclusive wheel design","top":"459px","left":"248px"},
          {"id":"picture1-more6","descr":"special exterior design","top":"196px","left":"187px"},
          {"id":"picture1-more7","descr":"better drag coefficient","top":"46px","left":"545px"}],
          ... each photo and its tooltips ...}
    });

詳しくは以下のサイトにどうぞ！

ランダムに要素を並び替える

バナーの順番をランダムで切り替えたり、おすすめ情報の並び順を切り替えたりする時に使える「jQuery Shuffle Plugin」をご紹介。

jQueryのプラグインを使用すれば、特定の要素だけランダムで表示できるようになります。

ソースコードは以下

(function($){
  $.fn.shuffle = function() {
    return this.each(function(){
      var items = $(this).children();
      return (items.length)
        ? $(this).html($.shuffle(items))
        : this;
    });
  }
 
  $.shuffle = function(arr) {
    for(
      var j, x, i = arr.length; i;
      j = parseInt(Math.random() * i),
      x = arr[--i], arr[i] = arr[j], arr[j] = x
    );
    return arr;
  }
})(jQuery);

使い方

要素をするだけで、ランダムに表示されるようになります。

$('ul').shuffle();

簡単ですね。
興味のある方は下のリンクからどうぞ！

リンク用途などにおいて画像のロールオーバーはかなり頻繁に利用されていますが、これをシンプルに実現できるようにするプラグインをご紹介。

今回は、以下のような機能があるjQuery.rollover.jsを使用していきます。

HTMLで指定するのは初期表示の画像だけ
指定された箇所でも _on が付いている画像は無視
ロールオーバー画像をプリロード
拡張子は何でもOK (png, jpg, jpeg, gif, etc…)
ロールオーバー画像を示す _on の部分を自由に変更できる

このスクリプトを実行するにはjQueryが必要になります。公式サイトから最新版をダウンロードしてください。

使い方

• jQueryをHEADタグ内で読み込みます。
• jquery.rollover.jsをjQueryの直後に読み込みます。

  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="jquery.rollover.js"></script>
  

• 自動でマウスオーバーを指定した画像に「 _on」というファイル名を指定します。
  例えばa.jpgをマウスオーバー処理したい場合には、a_on.jpgというファイルも同階層に用意します。

  そして、ロールオーバーしたい要素をjQueryで指定します。

  jQuery(document).ready(function($) {
    $('#nav a img').rollover();
  });

• これで設定は完了です。

以上、jQueryだけで画像のロールオーバーを実装するjQuery.RollOverの使い方でした！

「Noty」はダイアログの表示が出来るjQueryプラグインです。

通知は、上下、中央、左上または右上に配置することができます。

テキスト、アニメーション、速度、ボタンをカスタマイズするためのAPIが数多く用意されており、詳細なオプション指定が可能です。

使い方

jQueryと必要なライブラリを読込ます。

<script type="text/javascript" src="query.min.js"></script>
<script type="text/javascript" src="js/jquery.noty.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.noty.css"/>

↓以下のようにする事でアラートの表示が出来るようになります。

$('.ex1.alert').click(function() {
  noty({text: 'クリックされました'});
});

オプションが非常に豊富で、コードのジェネレーターも用意されています。
興味のある方は使ってみてください!

「Glisse.js」はCSSでデザインカスタマイズが可能フォトビューアです。

CSS3の機能がブラウザによっては変わってしまうためIE8などで動作しないのですが
面白そうだったのでご紹介。

以下のような機能を実装しているようです。

・キーボードナビゲーション
・CSSでのカスタマイズ
・CSS3キーフレームアニメーション
・7種類のトランジション効果
・ビューポート
・iPhone/iPad対応 （アンドロイドはもうすぐサポートするようです）

フォトギャラリーを作りたい方は触ってみると面白いかもしれません。
興味のある方は下のリンクからどうぞ。

ドラッグ操作でコンテンツをスクロール出来るようになります。

↑スクロールバーがiPhone風に表示されます。

↑ドラッグできない部分を作る事も可能です。

使い方

ドラッグしたい要素に以下の一文を追加するだけでドラッグが出来るようになるようです。

$("#overscroll").overscroll();

スマートフォンの普及によって、ブラウザの操作感も少し変わってきた気がします。
これからはタッチパネルが主流になり、PC向けサイトもこういったドラッグ対応は必須になるかもしれないですね。

興味のある方は下のリンクからどうぞ。

画像にマウスオーバーするとビフォー・アフター が比較できるjQueryプラグイン「uCompare」

使用前、使用後みたいな感じに2枚の画像を比較できるjQueryプラグインです。
ショッピングサイトなんかに使えそうですね。

デモでは東日本大震災の前後での
GoogleMapの画像を比較したりしています。
画像を見ると心苦しくなってしまうのですが、使い方次第では有用な使い方ができそうでした。

興味のある方は下のリンクからどうぞ。

HTMLベースのプレゼンツールは当サイトでも何度かご紹介しているのですが、アニメーションがカッコ良かったのとデザインが素敵だったのでご紹介。

deck.jsを使うとモダンなHTMLでプレゼンテーションが出来るようになります。

サイト自体がこのライブラリで実装されており、キーボードの矢印キーやマウスクリックに対応しておりサクサク動くようになっています。

触ってみると、エフェクトがいい感じに気持ちよくてちょっと次のプレゼンで使ってみたくなりました。

ドキュメントも豊富に揃っているので、カスタマイズも割と簡単にできそうです。

興味のある方は下のリンクからどうぞ。

吹出し型ツールチップを設置できるjQuery「grumble.js」が面白そうだったのでご紹介します。

これを使うと、漫画風の吹き出しを自由に表示する事が出来るようになります。

吹出しには背景画像が指定されているので、
CSSを変更してオリジナルの吹出しにする事も簡単そうでした。

使い方

以下のようなスクリプトを追加する事で表示する事ができました。

$('h1').grumble({
	text: 'ここにメッセージを入れます!', 
	angle: 85, 
	distance: 100, 
	showAfter: 500 
});

オプションの説明

• text:表示する文章
• angle:角度
• distance:距離
• showAfter:指定した秒数後に表示（ミリ秒）

オプショには他にもコールバック処理なんかもありました。
詳細&ダウンロードは下のリンクからどうぞ！

クレジットカードの入力フォーマットをチェック出来るjQueryプラグイン「Smart Validate」

以下のようなコードで簡単にチェックが出来るようになりました。

$('.cc-container').ccvalidate({ onvalidate: function(isValid) {
    if (!isValid) {
        alert('クレジットカードのフォーマットを正しく入力してください。');
        return false;
    }
}

ドロップダウンもいい感じにカスタマイズされています。
実際にカードが有効かどうかのチェックはできませんが、商品を購入する前にこういったチェックがあれば親切ですよね。

興味のある方は下のリンクからどうぞ。