スマホやiPad などのタブレット向けに最適化されたレスポンシブWEBデザイン対応のサイトで、Lightbox のような画像の見せ方を実装したい場合に便利なプラグイン「Swipebox」のご紹介です。

Swipebox は単体画像をLightbox 風に表示できるのはもちろん、複数枚の画像の切り替え表示をスワイプ操作で出来る点が秀逸です。
続きを読む

float などで横に並べたブロック要素の高さを揃えることができるjQuery プラグイン「jQueryAutoHeight」のご紹介です。

jQueryAutoHeight は、複数並んだブロック要素を高さの最大値で揃えて表示できるだけでなく、ブロック要素を横に何個並べるか？というカラムの指定もできますので、レイアウトの自由度も高くて非常に便利なプラグインです。
続きを読む

画像をLightbox 風に表示させるプラグインの中でも、個人的に最近お気に入りなのが今回紹介させていただくShadowbox です。

Shadowbox は、画像単体のオーバレイ表示や複数画像のスライド表示ができるだけでなく、インラインコンテンツやWMP、SWF、FLV、QuickTime などの動画ファイル、Flashにも対応しているという、かなり高機能なプラグインです。

しかもレスポンシブWEBデザイン対応なので、今や必要不可欠とも言えるスマートフォンやiPad 向けのサイトにも使えます。
続きを読む

jQuery の animate を使うことで、要素を横に動かしたり縦に動かしたりとアニメーションさせることができます。

また、jQuery Easing Plugin と併用することで、エフェクト付きの面白いアニメーションも実装することができますので、サイトの見せ方にひと工夫加えたい場合などには効果的だと思います。
続きを読む

IE7、IE8 のブラウザでもCSS3 の background-size:contain と background-size:cover を使用するためのjQuery プラグインが jquery.backgroundSize です。

そこまでしてIE 対応が必要か…の話は置いておいて、今回は jquery.backgroundSize の基本的な使い方をサンプルに加えて、プラグイン使用に関する注意点も合わせてご紹介します。
続きを読む

レスポンシブWEBデザイン対応のLightbox 系プラグイン Magnific Popup のご紹介です。

Magnific Popup はIE 7、8 にも対応していて、画像や動画、Modalやメールフォーム、Ajax Popup などオーバーレイで表示できるコンテンツもかなり豊富ですが、

なんと言っても「レスポンシブWEBデザイン」対応で、ブラウザ伸縮の表示及び、スマホやiPad での閲覧時でも最適なサイズで画像を拡大表示してくれるので、使い勝手の良いプラグインだと思います。
続きを読む

<img> タグで指定した画像を背景いっぱいにフルスクリーンで表示できるjQuery プラグインが jQuery Fullscreenr です。

以前紹介したプラグイン jQuery Backstretch とほぼ同じコトが出来ますが、jQuery Fullscreenr はCSS の background-image ではなく <img> タグに画像を指定するタイプになりますので扱い方が異なります。

また jQuery Backstretch 同様、カスタマイズ次第では複数枚の画像の中からランダムで1 枚の画像を表示させることも可能ですので、今回は jQuery Fullscreenr の基本的な使い方から画像のランダム出力方法まで紹介致します。
続きを読む

ブラウザの幅に合わせて画面いっぱいに画像を表示してくれるjQuery プラグイン jQuery Backstretch。

1 枚だけの背景画像をブラウザ幅に合わせてフルスクリーン表示できるのはもちろん、カスタマイズ次第では複数枚の画像をアクセス毎にランダムで切替表示することもできる便利なプラグインです。
続きを読む

スマホアプリのようにアイコンボタンをクリックして左右からメニューをスライド表示できるjQuery プラグイン mmenu のご紹介です。

オプションで色々カスタマイズができますが、まずは今回は mmenu の基本的な設置方法から使い方までをご紹介します。
続きを読む

以前はPCサイトやガラケーサイトで頻繁に目にした marquee タグによる文字のスクロール表示ですが、モダンブラウザや iPhone、iPad、またIE 8 や 7 の環境でもマーキーっぽく文字を流したい場合は、jQuery を利用すると便利です。

今回はjQuery を使って文字をマーキーっぽくスライド表示させる方法に加えて、
「指定の文字数以上ならマーキー、未満なら固定表示」
なんていう条件分岐もやってみようと思います。
続きを読む

テキストフォームに入力した文字数をカウント表示してくれるjQuery プラグインが TextChange です。

Twitterのように140文字を上限とした場合、入力文字数に応じて140 からカウントダウンしていき、140文字を超えると「負」の値で表示されます。
続きを読む

float を使って要素を横並びで表示する場合、「高さの異なる要素を行を揃えてキレいに表示したい！」と思いますが、
「height を固定値にして overfloe:hidden ではみ出た情報を非表示にして…なんてのはスマートじゃないし…」

という時に便利なjQueryプラグインが「jQuery.lineUp」です。
続きを読む

jQueryプラグイン「Superbox」を使って、Google の画像検索のような見せ方ができます。

サムネイル画像をクリックして、その直下に拡大画像を割り込ませて表示させるUIです。

ギャラリーサイトなどで Lightbox を使って立ち上げていた画像を、Superbox を使って見せ方を変えても面白いかもしれませんね。
続きを読む

テーブルを手軽にソートできるjQueryプラグイン「Stupid jQuery Table Sort」のご紹介です。

非常にシンプルで軽量なスクリプトなので、ちょっとしたテーブルのソートに便利です。

ライセンスはMIT license。
続きを読む