jQueryプラグイン・ライブラリ
[jQuery]Swiperで背景画像のスライドサンプル
jQuery CSS HTML
[jQuery]スムーススクロールの着地点を上下にずらす方法
着地点を下にずらす 着地点を上にずらす
[JS]jQuery Datepickerの日付フォーマットをyy/mm/ddに変更する方法
以前紹介させていただいたjQuery Datepickerですが、カレンダーの日付をクリックして表示される日付のフォーマットをyy/mm/ddに変更する方法のご紹介です。 Datepickerの日付フォーマットをyy/mm/ddに変更 前回...
[JS]jQuery fatNavの拡大縮小アニメーションを停止する方法
以前にシンプルなフルスクリーンメニューのjQueryプラグインjQuery fatNavの記事で紹介させていただいたjQuery fatNavで、ドロワーメニューの拡大縮小アニメーションをやめる方法のご紹介です。 制作案件でjQuery f...
[JS]シンプルなフルスクリーンメニューのjQueryプラグインjQuery fatNav
ハンバーガーメニューをクリックして、フルスクリーンでナビゲーションメニューを表示できるjQueryプラグインjQuery fatNavのご紹介です。 jQuery fatNav のダウンロード 以下のページからjQuery fatNavのフ...
[jQuerys]フォームの入力値を数字や整数のみに制御できるプラグインjQuery Plugin – Numeric
メールフォームなどテキストボックスへ文字を入力する際に、半角数字のみに制限してくれるjQueryプラグインjQuery Plugin – Numericのご紹介です。 jQuery Plugin – Numeric のダウンロード 以下のペ...
[JS]テキストをクリップボードにコピーさせることができるプラグイン「clipboard.js」
ソースコードやテキストをクリップボードにコピーしてもらうのに便利なjQueryプラグインclipboard.jsのご紹介です。 clipboard.js ファイルのダウンロード 以下のページからclipboard.js-masterのファイ...
[JS]アニメーションの種類も豊富なローディング用プラグインfakeLoader.js
ページ読み込み時のローディングを簡単に実装できるjQueryプラグインfakeLoader.jsのご紹介です。 fakeLoader.jsにはローディングのアニメーションが最初から7種類用意されており、またローディング画面の表示時間や背景色...
[JS]メールの二重送信を防止するjQueryプラグインjQuerty Form disable on submit
フォームで送信ボタンがダブルクリックされ、メールが二重送信されてしまうことを防ぐためのjQueryプラグイン「jQuery Form disable on submitのご紹介です。 ※jQueryを使うため、サーバーサイドではなくクライア...
[jQuery]ブラウザに合わせて背景画像を拡大縮小表示できるプラグインmaxImage
ブラウザのサイズに合わせて背景画像を伸縮できるjQueryプラグイン「maxImage」のご紹介です。 1枚の背景画像を置く以外にも、複数枚の画像をフェードイン・フェードアウトで切り替え表示させることもできますので、非常に便利なプラグインで...
[JS]特定の要素にブラー効果(ぼかし)を与えるjQueryプラグインFoggy
スマホアプリ起動時のスプラッシュ画像などにもよく見る「磨りガラス風のぼかし」効果ですが、 特定の要素に対してこのぼかし効果を与えることができるというjQueryプラグインFoggyのご紹介です。 Foggy のダウンロード 以下のページより...
[JS]高さの異なるコンテンツでもブロックレベル要素で揃えるjquery.heightLine.js
レスポンシブWEBデザイン対応で、コンテンツの中身が変わっても、ブロックレベル要素の高さを揃えることができるjQueryプラグインjquery.heightLine.jsのご紹介です。 jquery.heightLine.js のダウンロー...
[jQuery]マウスオーバーでカラー画像を白黒にできるプラグインjQuery.BlackAndWhite
カラーの画像をマウスオーバーで白黒に切り替えることができるjQueryプラグインjQuery.BlackAndWhiteについて、設置方法と簡単なデモをご紹介します。 jQuery.BlackAndWhite のダウンロード 以下のページよ...
[JS]Bxsliderでクリックではなくhover(マウスオーバー)で画像をスライドさせる方法
レスポンシブWEBデザイン対応で、カルーセルやサムネイルページャー(サムネイル付きスライド)などが可能な高機能スライドプラグインBxsliderですが、 サムネイルやページングのリンクを「クリック(click)」するのではなく、「マウスオー...
[JS]jQueryで高さの異なる要素を最大値で揃える方法
floatで横並びにした要素の高さを最大値で揃えるためには、以前に紹介させていただいたCSS を使う方法以外に、jQueryでも対応することが可能ですので紹介させていただきます。 jQueryで高さの異なる要素を最大値で揃える 今回、flo...
[jQuery]文字量に応じてテキストエリアが自動でリサイズするプラグインjQuery Autosize
フォームのテキストエリアtextareaの高さを、テキスト量に応じて可変にできるjQueryプラグインjQuery Autosizeのご紹介です。 テキストエリアに文字をどんどん打って行くと、文字量に応じてテキストが下へ下へと広がって行きま...
[JS]Lightboxのように画像を拡大表示してスワイプ操作でスライドできるjQueryプラグインSwipebox
スマホやiPadなどのタブレット向けに最適化されたレスポンシブWEBデザイン対応のサイトで、Lightboxのような画像の見せ方を実装したい場合に便利なプラグインSwipeboxのご紹介です。 Swipeboxは単体画像をLightbox ...
[jQuery]複数並んだブロック要素の高さを最大値で揃えるプラグインjQueryAutoHeight
floatなどで横に並べたブロック要素の高さを揃えることができるjQueryプラグインjQueryAutoHeightのご紹介です。 jQueryAutoHeightは、複数並んだブロック要素を高さの最大値で揃えて表示できるだけでなく、ブロ...
[jQuery]SWFやWMPなどの動画ファイルもLightbox風に表示できるプラグインShadowbox
画像をLightbox風に表示させるプラグインの中でも、個人的に最近お気に入りなのが今回紹介させていただくShadowboxです。 Shadowboxは、画像単体のオーバレイ表示や複数画像のスライド表示ができるだけでなく、インラインコンテン...
[JS]jQueryのanimateによるアニメーションのサンプルまとめ
jQueryのanimateを使うことで、要素を横に動かしたり縦に動かしたりとアニメーションさせることができます。 また、jQuery Easing Pluginと併用することで、エフェクト付きの面白いアニメーションも実装することができます...
[jQuery]IE7、8でもbackground-size:containが利用できるプラグインjquery.backgroundSize
IE7、IE8のブラウザでもCSS3のbackground-size:containとbackground-size:coverを使用するためのjQuery プラグインがjquery.backgroundSizeです。 そこまでしてIE対応...
[JS]レスポンシブ対応で画像や動画をLightbox風に表示できるMagnific Popup
レスポンシブWEBデザイン対応のLightbox系プラグインMagnific Popupのご紹介です。 Magnific Popup>はIE 7、8にも対応していて、画像や動画、Modalやメールフォーム、Ajax Popupなどオーバーレ...
[jQuery]背景いっぱいの画像を表示できるプラグインjQuery Fullscreenr
<img>タグで指定した画像を背景いっぱいにフルスクリーンで表示できるjQueryプラグインがjQuery Fullscreenrです。 以前紹介したプラグインjQuery Backstretch とほぼ同じコトが出来ますが、jQuery ...
[jQuery]背景全体に画像を固定させランダム表示もできるプラグインjQuery Backstretch
ブラウザの幅に合わせて画面いっぱいに画像を表示してくれるjQueryプラグインjQuery Backstretch。 1枚だけの背景画像をブラウザ幅に合わせてフルスクリーン表示できるのはもちろん、カスタマイズ次第では複数枚の画像をアクセス毎...
[jQuery]スマホアプリのように左右からメニューをスライド表示できるプラグインmmenu
スマホアプリのようにアイコンボタンをクリックして左右からメニューをスライド表示できるjQuery プラグインmmenuのご紹介です。 オプションで色々カスタマイズができますが、まずは今回はmmenuの基本的な設置方法から使い方までをご紹介し...