MIGI PLANNING » 08 jQuery http://m-pl.jp Just another WordPress weblog Fri, 23 Jul 2010 10:05:53 +0000 http://wordpress.org/?v=2.9.1 ja hourly 1 最近リリースされた使えるjQueryプラグイン集「29 Best And Useful jQuery Plugins Of June 2010」 http://m-pl.jp/2010/07/23/%e6%9c%80%e8%bf%91%e3%83%aa%e3%83%aa%e3%83%bc%e3%82%b9%e3%81%95%e3%82%8c%e3%81%9f%e4%bd%bf%e3%81%88%e3%82%8bjquery%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e9%9b%86%e3%80%8c29-best-and-useful-jque/ http://m-pl.jp/2010/07/23/%e6%9c%80%e8%bf%91%e3%83%aa%e3%83%aa%e3%83%bc%e3%82%b9%e3%81%95%e3%82%8c%e3%81%9f%e4%bd%bf%e3%81%88%e3%82%8bjquery%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e9%9b%86%e3%80%8c29-best-and-useful-jque/#comments Fri, 23 Jul 2010 10:03:09 +0000 migi http://m-pl.jp/?p=443 http://design-develop.net/web-design/29-best-and-useful-jquery-plugins.html

非常に優秀なjavascriptライブラリjQuery、様々な表現を可能にしてくれる今やWEB制作では欠かせないライブラリの一つです。ライブラリ本体も便利なのですが、その魅力は数多くリリースされている様々なプラグインにも支えられています。今日紹介するのはjQueryの機能を生かした最近リリースされた使えるプラグインを集めたエントリー「29 Best And Useful jQuery Plugins Of June 2010」を紹介したいと思います。


dualSlider

カレンダー、マウスオーバー、メニュー、スライダーなどなど、様々な種類のプラグインがまとめられていました。今日はその中から幾つか気になったプラグインを紹介したいと思います。

詳しくは以下

■jQuery DivGrow Plugin
簡単にDivの内容が格納できるプラグイン。クリックするとアニメーションによって表示されます。

■Popeye ? an inline lightbox alternative
よくあるブラックアウトではなくて、その場でサムネイルが拡大され、スライドショーを展開できる新しいタイプのライトボックス系プラグイン。

popeye-e1279262343611
View Demo

■Shadow Animation
CSSのシャドウを利用してロールオーバーをjQueryで表現。CLick meの浮いているボタンはかなりスムーズに表現されています。

shadow-animation-e1279270720225
View Demo

上記の他にも様々なプラグインが公開されています。普段からWEB制作をされている方であれば、ドキュメントを見ながら、組み込みができるかと思います。表現の幅を広げてくれるjQueryプラグイン。便利に使いたいですね。

29 Best And Useful jQuery Plugins Of June 2010

]]> http://m-pl.jp/2010/07/23/%e6%9c%80%e8%bf%91%e3%83%aa%e3%83%aa%e3%83%bc%e3%82%b9%e3%81%95%e3%82%8c%e3%81%9f%e4%bd%bf%e3%81%88%e3%82%8bjquery%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e9%9b%86%e3%80%8c29-best-and-useful-jque/feed/ 0 jQueryで実現するクリエイティブなイメージギャラリー集「20+ jQuery Image Gallery for your next project」 http://m-pl.jp/2010/07/15/jquery%e3%81%a7%e5%ae%9f%e7%8f%be%e3%81%99%e3%82%8b%e3%82%af%e3%83%aa%e3%82%a8%e3%82%a4%e3%83%86%e3%82%a3%e3%83%96%e3%81%aa%e3%82%a4%e3%83%a1%e3%83%bc%e3%82%b8%e3%82%ae%e3%83%a3%e3%83%a9%e3%83%aa/ http://m-pl.jp/2010/07/15/jquery%e3%81%a7%e5%ae%9f%e7%8f%be%e3%81%99%e3%82%8b%e3%82%af%e3%83%aa%e3%82%a8%e3%82%a4%e3%83%86%e3%82%a3%e3%83%96%e3%81%aa%e3%82%a4%e3%83%a1%e3%83%bc%e3%82%b8%e3%82%ae%e3%83%a3%e3%83%a9%e3%83%aa/#comments Thu, 15 Jul 2010 07:51:21 +0000 migi http://m-pl.jp/?p=441 http://design-develop.net/web-design/jquery-image-gallery.html

軽量で非常に高機能なjavascriptライブラリ「jQuery」。様々なプロジェクトで利用されていますが、今回紹介するのはjQueryをつかったイメージギャラリーを集めたエントリー「20+ jQuery Image Gallery for your next project」です。


AviaSlider ? a unique jQuery Image slideshow plugin

画像と画像の間のエフェクトに凝ったものから、フューチャーリストのようにサムネイルと連動しているものまで様々なイメージギャラリーが紹介されています。今日はその中から幾つか気になったものを紹介したいと思います。

詳しくは以下

■Create an Image Rotator with Description (CSS/jQuery) ? Web Design Blog ? DesignM.ag
詳細情報が含まれたサムネイルと連動したイメージギャラリー。ニュースの新着などにも利用できそうです。

Image-Rotator-w-Teaser-CSS-jQuery-Tutorial_1276786642746

■jqFancyTransitions: jQuery Image Rotator Plugin
javascriptのイメージギャラリーの中では豊富なトランジションが魅力的な画像ギャラリー。

jqFancyTransitions-jQuery-Image-Rotator-Plugin_1276786254721

■jQuery Smooth Div Scroll by Thomas Kahn
次々とスクロールするイメージギャラリー。パノラマ写真やひと繋ぎの絵を見せるときにも使えそうです。

smoothdivscroll

上記の他にも様々なスライダーが用意されています。イメージギャラリーと一口にいっても様々なタイプのものがありますので、コンテンツやデザインによって使い分けれればより良いWEBページになるのではないでしょうか？

20+ jQuery Image Gallery for your next project

]]> http://m-pl.jp/2010/07/15/jquery%e3%81%a7%e5%ae%9f%e7%8f%be%e3%81%99%e3%82%8b%e3%82%af%e3%83%aa%e3%82%a8%e3%82%a4%e3%83%86%e3%82%a3%e3%83%96%e3%81%aa%e3%82%a4%e3%83%a1%e3%83%bc%e3%82%b8%e3%82%ae%e3%83%a3%e3%83%a9%e3%83%aa/feed/ 0 素晴らしいjQueryのスライダーを集めた「25 Excellent jQuery Sliders Tutorials and Plugins」 http://m-pl.jp/2010/06/27/%e7%b4%a0%e6%99%b4%e3%82%89%e3%81%97%e3%81%84jquery%e3%81%ae%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc%e3%82%92%e9%9b%86%e3%82%81%e3%81%9f%e3%80%8c25-excellent-jquery-sliders-tutorials-and-plugins/ http://m-pl.jp/2010/06/27/%e7%b4%a0%e6%99%b4%e3%82%89%e3%81%97%e3%81%84jquery%e3%81%ae%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc%e3%82%92%e9%9b%86%e3%82%81%e3%81%9f%e3%80%8c25-excellent-jquery-sliders-tutorials-and-plugins/#comments Sat, 26 Jun 2010 23:18:55 +0000 migi http://m-pl.jp/?p=429 http://design-develop.net/web-design/excellent-jquery-sliders.html

非常に高機能でWEB制作には幅広く利用されている、jQueryプラグインですが、その中でも定番とも言えるのがスライダー。限られた領域で jQueryのプラグインの中でも多く利用されているスライダープラグイン。今日紹介するのはクオリティの高い、素晴らしいjQueryのスライダーを集 めたエントリー「25 Excellent jQuery Sliders Tutorials and Plugins」です。

jqs-25
A Beautiful Apple-Style Slideshow Gallery with CSS & jQuery

定番の右から左へ流れるもの、トランジションが効いているもの、キャプチャやサムネイルと連動しているものなどなど、様々なスライダーがまとめられ ています。今日はその中からいくつか気になったものを紹介したいと思います。

詳しくは以下

■Animate Panning Slideshow with jQuery
横スライドだけではなく、縦横と動きがつけられるスライダー。

jqs-5

■How to Create a Simple iTunes-Like Slider
サイドのサムネイルと連動したスライダー。ビジュアルや写真中心のスライダーを創るときにオススメ。

jqs-2

■Create Featured Content Slider Using jQuery UI
コンテンツと連動できるFeaturedスライダー。WEBマガジンなどには相性が良いスライダーです。

jqs-10

上記のほかにも様々なスライダーが公開されています。スライダーを使ったWEB制作を考えている方は是非原文もご覧ください。思い描いたスライダーに出会 えるかもしれません。

25 Excellent jQuery Sliders Tutorials and Plugins | Vandelay Design Blog

]]> http://m-pl.jp/2010/06/27/%e7%b4%a0%e6%99%b4%e3%82%89%e3%81%97%e3%81%84jquery%e3%81%ae%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc%e3%82%92%e9%9b%86%e3%82%81%e3%81%9f%e3%80%8c25-excellent-jquery-sliders-tutorials-and-plugins/feed/ 0 テキストをフェードインしながらマウスオーバーで色を変える「jQuery Glow」 http://m-pl.jp/2010/05/24/%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e3%82%92%e3%83%95%e3%82%a7%e3%83%bc%e3%83%89%e3%82%a4%e3%83%b3%e3%81%97%e3%81%aa%e3%81%8c%e3%82%89%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc/ http://m-pl.jp/2010/05/24/%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e3%82%92%e3%83%95%e3%82%a7%e3%83%bc%e3%83%89%e3%82%a4%e3%83%b3%e3%81%97%e3%81%aa%e3%81%8c%e3%82%89%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc/#comments Mon, 24 May 2010 01:04:18 +0000 migi http://m-pl.jp/?p=423 http://design-develop.net/web-design/jquery-glow.html

様々なシーンで利用されている軽量かつ高機能なjavascriptライブラリjQuery。本当に色々な事が工夫次第で可能ですが、今回紹介するのはテキストをフェードインしながらマウスオーバーで色を変える「jQuery Glow」です。言葉で説明するとわかりづらいので、まずは下記からデモをご覧下さい

herearesomoe
jQuery Glow Demo

通常のテキストにマウスオーバーするとゆっくりとフェードしながら色が変わっていきます。

詳しくは以下

色の変化はscript部分で制御されており、テキストの元のカラーを定義して指定したクラス名を表示させたい箇所に割り当てるだけです。

非常に細かい部分で、使いどころは限られるかもしれませんが、HTMLで少し動きを付けたい時やテキストを主体とした大きなメニューを設置していたりする場合には良いかもしれません。シンプルな作りになっていますので、既存のサイトなどでも簡単に実装できると思います。

Ajaxian ? jQuery Glow

]]> http://m-pl.jp/2010/05/24/%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e3%82%92%e3%83%95%e3%82%a7%e3%83%bc%e3%83%89%e3%82%a4%e3%83%b3%e3%81%97%e3%81%aa%e3%81%8c%e3%82%89%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc/feed/ 0 最近発表された使えるjQueryプラグイン20選「 20 Best And Useful jQuery Plugins of March 2010 」 http://m-pl.jp/2010/05/14/%e6%9c%80%e8%bf%91%e7%99%ba%e8%a1%a8%e3%81%95%e3%82%8c%e3%81%9f%e4%bd%bf%e3%81%88%e3%82%8bjquery%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b320%e9%81%b8%e3%80%8c-20-best-and-useful-jquery-plugins-of-m/ http://m-pl.jp/2010/05/14/%e6%9c%80%e8%bf%91%e7%99%ba%e8%a1%a8%e3%81%95%e3%82%8c%e3%81%9f%e4%bd%bf%e3%81%88%e3%82%8bjquery%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b320%e9%81%b8%e3%80%8c-20-best-and-useful-jquery-plugins-of-m/#comments Fri, 14 May 2010 08:52:59 +0000 migi http://m-pl.jp/?p=418 http://design-develop.net/web-design/20-best-and-useful-jquery-plugins.html

軽量で高機能なjavascriptで知られるjQuery。数多くのプラグインがリリースされていて多くのプラグインが公開されていますが、最近公開されたもののなかから使えるプラグインを厳選したエントリー「 20 Best And Useful jQuery Plugins of March 2010 」を紹介したいと思います。

21-e1270452809523
axImage ? jQuery Image Scaler

ジャンルは様々で、スライドショー的なものから、背景画像周りナビゲーション等々様々なアイデア溢れるプラグインがまとめられています。今日はその中から幾つか気になったプラグインを紹介したいと思います。

詳しくは以下

■Picbox
わずか5KBと非常に軽量なサイズのライトボックスプラグイン。

3-e1270453477395

■(MB) Extruder
画面上部から引き出せるアニメーションメニュー。様々な使い方ができそうなナビゲーションです。

3-e1270453477395

■Senamion.com – jMagnify (Ola effect on text) plugin: documentation and demo page
カーソルを当てた部分だけ部分的に拡大するようなエフェクトを追加できるプラグイン。

3-e1270453477395

上記のほかにも様々なプラグインが公開されています。用途に合わせて使えば、サイトの印象や使い勝手を大きく変えてくれると思います。どのプラグインもデモと実装のためのソースコードが展開されていますので、海外のサイトばかりですが、問題なく実装できるかと思います。

20 Best And Useful jQuery Plugins of March 2010

]]> http://m-pl.jp/2010/05/14/%e6%9c%80%e8%bf%91%e7%99%ba%e8%a1%a8%e3%81%95%e3%82%8c%e3%81%9f%e4%bd%bf%e3%81%88%e3%82%8bjquery%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b320%e9%81%b8%e3%80%8c-20-best-and-useful-jquery-plugins-of-m/feed/ 0 実用的なjQueryで作るスライダーをまとめた「28 Useful JQuery Sliders You Need To Download」 http://m-pl.jp/2010/04/09/%e5%ae%9f%e7%94%a8%e7%9a%84%e3%81%aajquery%e3%81%a7%e4%bd%9c%e3%82%8b%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc%e3%82%92%e3%81%be%e3%81%a8%e3%82%81%e3%81%9f%e3%80%8c28-useful-jquery-sliders-you-nee/ http://m-pl.jp/2010/04/09/%e5%ae%9f%e7%94%a8%e7%9a%84%e3%81%aajquery%e3%81%a7%e4%bd%9c%e3%82%8b%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc%e3%82%92%e3%81%be%e3%81%a8%e3%82%81%e3%81%9f%e3%80%8c28-useful-jquery-sliders-you-nee/#comments Thu, 08 Apr 2010 23:52:58 +0000 migi http://m-pl.jp/?p=400 http://design-develop.net/web-design/28-useful-jquery-sliders-you-need-to-download.html

高機能で軽量なjavascriptライブラリjQuery。様々なプラグインがリリースされていて、現在では多くのWEBサイトで導入されています。そのなかでもよく見かけるのがスライダーを使った仕組み。限られたスペースで効果的に銃砲を見せることができます。今日はそんなスライダーをまとめたエントリー「28 Useful JQuery Sliders You Need To Download」を紹介したいと思います。

28 Useful JQuery Sliders You Need To Download

]]> http://m-pl.jp/2010/04/09/%e5%ae%9f%e7%94%a8%e7%9a%84%e3%81%aajquery%e3%81%a7%e4%bd%9c%e3%82%8b%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc%e3%82%92%e3%81%be%e3%81%a8%e3%82%81%e3%81%9f%e3%80%8c28-useful-jquery-sliders-you-nee/feed/ 0 縦横にアコーディオンするjQueryアコーディオン「Grid Accordion with jQuery」 http://m-pl.jp/2010/03/24/%e7%b8%a6%e6%a8%aa%e3%81%ab%e3%82%a2%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%82%aa%e3%83%b3%e3%81%99%e3%82%8bjquery%e3%82%a2%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%82%aa%e3%83%b3%e3%80%8cgrid-accordion/ http://m-pl.jp/2010/03/24/%e7%b8%a6%e6%a8%aa%e3%81%ab%e3%82%a2%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%82%aa%e3%83%b3%e3%81%99%e3%82%8bjquery%e3%82%a2%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%82%aa%e3%83%b3%e3%80%8cgrid-accordion/#comments Wed, 24 Mar 2010 01:19:17 +0000 migi http://m-pl.jp/?p=378 多くのコンテンツを少ない面積で見せることができるアコーディオンによる見せ方は様々なWEBのシーンで使われていますが、今回紹介するのは、通常一方向だけではなく、縦と横、両方向に展開ができるjQueryを使ったアコーディオン「Grid Accordion with jQuery」です。

desingdevelopsjquery
InfoGrid – DEMO

上記のように、多数のカテゴリーでコンテンツが多岐に渡る場合や表組みで、比較したいときなどは非常に便利な機能だと思います。

HTML側はdl、dt、ddで構成された非常にシンプルなものになっており、それおをCSSでデザインをし、jQueryで動きを動作するというものになっています。

ソースコード自体は非常にシンプルなものになっていますので、この手のライブラリをつかって何かを組み込んだことがある方なら問題なく実装できるかと思います。ソースファイルをまるごと収録したサンプルファイルも「Grid Accordion with jQuery | CSS-Tricks」からダウンロード可能ですので、良いなと思った方は是非どうぞ。

]]> http://m-pl.jp/2010/03/24/%e7%b8%a6%e6%a8%aa%e3%81%ab%e3%82%a2%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%82%aa%e3%83%b3%e3%81%99%e3%82%8bjquery%e3%82%a2%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%82%aa%e3%83%b3%e3%80%8cgrid-accordion/feed/ 0 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects http://m-pl.jp/2010/02/19/35-useful-jquery-plugins-for-slideshows-graphs-and-text-effects/ http://m-pl.jp/2010/02/19/35-useful-jquery-plugins-for-slideshows-graphs-and-text-effects/#comments Fri, 19 Feb 2010 04:43:42 +0000 migi http://m-pl.jp/?p=346 http://www.noupe.com/jquery/35-useful-jquery-plugins-for-slideshows-graphs-and-text-effects.html

]]> http://m-pl.jp/2010/02/19/35-useful-jquery-plugins-for-slideshows-graphs-and-text-effects/feed/ 0 ナンバリングがついたjQueryとCSSで制御するスライダー「 Automatic Image Slider w/ CSS & jQuery」 http://m-pl.jp/2010/02/11/%e3%83%8a%e3%83%b3%e3%83%90%e3%83%aa%e3%83%b3%e3%82%b0%e3%81%8c%e3%81%a4%e3%81%84%e3%81%9fjquery%e3%81%a8css%e3%81%a7%e5%88%b6%e5%be%a1%e3%81%99%e3%82%8b%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc/ http://m-pl.jp/2010/02/11/%e3%83%8a%e3%83%b3%e3%83%90%e3%83%aa%e3%83%b3%e3%82%b0%e3%81%8c%e3%81%a4%e3%81%84%e3%81%9fjquery%e3%81%a8css%e3%81%a7%e5%88%b6%e5%be%a1%e3%81%99%e3%82%8b%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc/#comments Thu, 11 Feb 2010 01:15:50 +0000 migi http://m-pl.jp/?p=342 http://design-develop.net/web-design/automatic-image-slider.html

非常に高機能なjavascriptライブラリとして、WEBではかなり利用されているjQuery。今回紹介するのはjQueryとCSSで制御するスライダー「Automatic Image Slider w/ CSS & jQuery」です。

この手のjQueryを用いたスライダーは数多く存在しますが、「Automatic Image Slider w/ CSS & jQuery」はHTML部分、CSS部分とてもシンプルに作られており、カスタマイズが非常に簡単に行なう事ができます。また動きの部分のjQuery もシンプルなので、カスタマイズもjavascriptを知らないというかたでも何となく分かる作りになっています。

http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/

]]> http://m-pl.jp/2010/02/11/%e3%83%8a%e3%83%b3%e3%83%90%e3%83%aa%e3%83%b3%e3%82%b0%e3%81%8c%e3%81%a4%e3%81%84%e3%81%9fjquery%e3%81%a8css%e3%81%a7%e5%88%b6%e5%be%a1%e3%81%99%e3%82%8b%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc/feed/ 0 サイト制作に便利なjQuery集「15 useful jQuery plugins and tutorials」 http://m-pl.jp/2010/01/12/%e3%82%b5%e3%82%a4%e3%83%88%e5%88%b6%e4%bd%9c%e3%81%ab%e4%be%bf%e5%88%a9%e3%81%aajquery%e9%9b%86%e3%80%8c15-useful-jquery-plugins-and-tutorials%e3%80%8d/ http://m-pl.jp/2010/01/12/%e3%82%b5%e3%82%a4%e3%83%88%e5%88%b6%e4%bd%9c%e3%81%ab%e4%be%bf%e5%88%a9%e3%81%aajquery%e9%9b%86%e3%80%8c15-useful-jquery-plugins-and-tutorials%e3%80%8d/#comments Tue, 12 Jan 2010 06:22:25 +0000 migi http://m-pl.jp/?p=311 http://www.designer-daily.com/15-useful-jquery-plugins-and-tutorials-5207

軽量で高機能なjavascript、jQuery。様々なサイトで様々な形で利用されていますが、今回紹介するのはサイト制作に便利なjQueryを集めた、「15 useful jQuery plugins and tutorials」です。

キャプチャー、フューチャーリスト、サジェストなどなど様々なプラグイン紹介されています。今日はその中から気になったものをいくつかピックアップして紹介したいと思います。

http://design-develop.net/web-design/15-useful-jquery-plugins-and-tutorials.html

]]> http://m-pl.jp/2010/01/12/%e3%82%b5%e3%82%a4%e3%83%88%e5%88%b6%e4%bd%9c%e3%81%ab%e4%be%bf%e5%88%a9%e3%81%aajquery%e9%9b%86%e3%80%8c15-useful-jquery-plugins-and-tutorials%e3%80%8d/feed/ 0