IMGr :: jQuery Image Rounder IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」 $("imageElement").imgr(); と唱えるだけでクロスブラウザで画像の角を丸くすることが可能です。 $("imageElement").imgr( optoins ); でradiusやサイズ、色のカスタマイズが可能。 赤いボーダーで角丸の例 ボーダーを消した例 四方の角丸の操作も自由自在です。 IE 6, IE 7, IE 8, FF 3.6, Chrome 6.0, Safari 5.0, Opera 10.62 のブラウザ上でテストされているそうです。 関連エントリ CSSで角丸テクニック２５ 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」 CSS3で影付き角丸グラデーション付きのボタンを作成す

異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 2011年04月07日- Google image search style image alignment with jQuery Atteeeeention plugin | DreamersLab 異なる幅・高さの画像も超綺麗に並べられるjQueryプラグイン「Atteeeeention plugin」。 <img>でただ単に画像を並べると、幅、高さの違いから、ページがごちゃごちゃしてしまいますが、このプラグインを使うことでGoogle の画像検索のように綺麗にピッチリ並べられます。 普通に並べるとちょっと残念なことに。空白ができちゃいます。 プラグインを使うことで、あら綺麗。となります。 Firefox は 2以上、IEは6以上ということで殆どのブラウザに対応。 まず、必要な

ShineTime ? A Kick-Ass New jQuery & CSS3 Gallery With Animated Shine Effects 画像や枠などをキラッと超カッコよく光らせるエフェクトをjQueryで実装する例が公開されています。 透明と白のグラデーション画像を斜めにして画像や枠の上をアニメーションで横切らせるというシンプルな方法でFlashサイトのようなクールな演出を実現しています。 実際のデモを見てみましょう。 超クールですね。 チュートリアル形式になっているので横切らせる画像を替えたりしても面白いかも。 このエフェクトは使える気がします。 チュートリアルでは現在のところjQueryは使っていますがプラグインの形ではないのでコードを記述する必要がありますが、プラグインになったらより便利そうですね。 関連エントリ 画像の映り込みエフェクトを実現するJavaScrip

imgZoom デモ [ad#ad-2] imgZoomの主な特徴 lightbox風のインターフェイス（暗いオーバーレイ、次の画像へのスイッチ） CSS/HTMLベースでのカスタマイズ フェードや回転のアニメーションで画像を拡大 ズームイン、ズームアウトのAPIの提供 jQueryのプラグインとして動作する軽量（7KB）スクリプト imgZoomの実装方法 外部ファイル 下記の3ファイルを外部ファイルとして記述します。 &lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;type=&quot;text/css&quot;&nbsp;href=&quot;css/imgzoom.css&quot;&nbsp;/&gt; &lt;script&nbsp;type=&quot;text/javascript&quot;&nbsp;src=&quot;sc

Lig本サイトのオフィス紹介ページで使用するJqueryプラグインを探している際、初心者のtmkでも分かりやすそうなJSを3つ程見つけたので忘れない内にご紹介します。 slideViewerPro 1.0 横にスライドしていくシンプルなギャラリー。 コントローラーの有り無し、画像の自動再生などお好みの形に変更できます。 Galleria こちらもシンプルながら美しいギャラリーが作れます。サムネイルにカーソルを当てるとぼんやり明るくなるところが個人的に綺麗ポイントです。Allaboutさんで一から丁寧に設置方法を説明されているので、Jquery初心者入門編として良いかも知れません。 bxGallery こちらもシンプルながら画像の切り変わりが綺麗なギャラリー。 設置も簡単でHTMLを殆ど弄ることなく表示を変更する事が出来ました。 今回オフィス紹介ページで実際に使用させて頂い

利用しやすいものから、利用シーンを選ぶものまで、jQueryを使って実装したナビゲーションを紹介します。

ページ内のさまざまな要素に、オーバーレイをアニメーションで簡単に適用できるjQueryのプラグインを紹介します。 Simple Overlay [ad#ad-2] 上記ページの右上にもデモが掲載されており、左の「Try It」ボタンをクリックすると下記のようにモニターの画像にオーバーレイが適用されます。 オーバーレイの解除はオーバーレイをクリックです。 デモのキャプチャ（拡大） Simple Overlayの主な特徴 さまざまなエフェクト jQueryを使用しているので、フェードのエフェクト、スライドのエフェクトなどさまざまなアニメーションでオーバーレイを適用できます。もちろん、エフェクト無しも可です。 CSSでのフック オーバーレイを適用する要素に、オーバーレイがアクティブである時にclass名を付与することができます。 コールバック オーバーレイ時にコールバックを設定することができます

紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 simpleSli.de フレキシブルでシンプルで軽量なコンテンツスライダーの決定版。 Lightbox_me DOM要素を指定して

ページのデザイン時に悩むのが、2カラムレイアウトなどでサイドバーにどのくらいのコンテンツを配置するのか、というのがあります。 理想的なのは、メインとなるコンテンツと同じくらいの高さになるのが無駄もなくいいかもしれません。しかし、メインのコンテンツ量が決まったものではなく、しかも長い場合はサイドバーに未使用のスペースが多く生じてしまいます。 [ad#ad-2] この無駄になってしまう空きスペースの解決方法の一つとして、スペースの量に合わせてダイナミックにサイドバーのコンテンツを配置する方法を紹介します。

軽快なアニメーションが心地よいナビゲーションを実装するjQueryのチュートリアルを紹介します。 タイトルにある通り、Flashは使わないで実装されてます。 Animated Content Menu with jQuery デモページ [ad#ad-2] まずは、デモページを堪能ください。 ナビゲーションの各ラベルをクリックすると、それに対応したパネルがアニメーションを伴って開くようになっています。 デモページ 実装 HTMLの構造は、背景画像、グリッドのオーバーレイ、ローディングのアイコン、メインメニューの4つから構成されています。 HTML：背景 背景は、背景画像とオーバーレイとローディングをdiv要素で内包します。 <div id="ac_background" class="ac_background"> <img class="ac_bgimage" src="images/D

jGmaps | jQuery Plugins Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」 必要なライブラリを読み込んで、次のようにjgmapsメソッドを呼び出すとGoogleマップによる経路案内の地図と文字による案内情報が出ます。 $('#mapa').jgmaps( { width: 300, height: 300, directions:{ address: ['東京都新宿区', '東京都港区'], usePanel: true, panelId: 'panelDirections' } } ); 次のように、経路が地図に表示されます。 文字による案内情報も表示できます。 会社案内や会場案内なんかもこれで速攻実装できそうですね。 ダウンロードできるサンプルをいじくってみましょう。 地名に日本の場所を漢字で使う場合、文字コードはUTF-

自動リサイズしつつ手動でサイズも切り替えられるテキストエリア実装jQueryプラグイン「Hycus Textarea」 2011年06月16日- Auto-growing and re-sizable textarea ? Jquery Plugin - Hycus 自動リサイズしつつ手動でサイズも切り替えられるテキストエリア実装jQueryプラグイン「Hycus Textarea」。 次のような、どんなサイトのデザインでもじゃまにならない、普通のテキストエリアの下にツマミをつけたようなテキストエリアが実装できます。 改行をうって文書が長くなろうと自動でサイズが大きくなる点も特徴。 実装は必要なライブラリを読み込んだら以下１行でOK。 対象もjQueryのセレクタで一括指定も可能。 $('#txtarea').hycustextarea(); ひょっとしてHTML5いらないんじゃないかとい

ECサイトで使えそうな画像のレンズズームを超簡単に実装できるjQueryプラグイン「Lens Zoom」 2011年06月23日- A jQuery plug-in for Lens Effect Image Zooming ECサイトで使えそうな画像のレンズズームを超簡単に実装できるjQueryプラグイン「Lens Zoom」。 次のように、画像の特定部分の円形のみをズームするようなUIが簡単に作れちゃいます。 ECサイトなどで商品を拡大するように実装されていたらお客さんに喜んでもらえるかも。 レンズの大きさもピクセル指定で自由自在です。 白黒写真がレンズを入れることでカラーになるみたいな効果も。 レンズの色やサイズも選べます。 実装の容易さも素晴らしくて、.imageLensで初期化するだけです。 関連エントリ タイマーを作る際に便利なjQueryプラグイン「jQuery Timer」