jQueryプラグイン・ライブラリ の記事一覧
![[JS]IE 下位バージョンで smoothRollOver.js が正常に動かない時の対処法](https://www.webantena.net/wp-content/uploads/2012/11/smoothrollover.png)
[JS]IE6でも滑らかなロールオーバを実現させるには「smoothRollOver.js」が便利の記事で紹介させていただいた便利なjavascript smoothRollOver.js ですが、 smoothRollOver.js を使うと画像のレイアウトがおかしくなる!! という時の対処法です。
続きを読む
![[JS]ランダムで、しかも指定件数分だけ要素を表示させるjavascript「randomDisplay.js」](https://www.webantena.net/wp-content/uploads/2012/12/randomdisplay.png)
例えば「5件の記事の中から2件をランダム表示させる」のような処理を、jQueryを利用して実現させる方法です。
jQuery を使うので、小難しいプログラムを書いてランダムで記事を取ってくる…なんて処理は不要ですし、（javascriptが使えれば）無料のブログサービスや企業サイトなどでも利用できるので、汎用性が高く便利なjavascript です。
続きを読む
![[JS]指定した要素を「ふわふわ」動かすjQueryプラグイン「jquery.yurayura」](https://www.webantena.net/wp-content/uploads/2013/04/javascriptjquery.png)
jQuery を利用して画像を動かす方法には色々ありますが、指定した要素（画像など）を「ふわふわ」浮いているように見せるためのプラグインが jquery.yurayura.js です。
縦方向に「ふわふわ」動くイメージですが、移動距離とスピードの設定次第では面白い動きも実現できるかもしれません。
続きを読む
![[JS]IE下位バージョンでも透過画像を使えるようにするjQueryプラグイン「jquery.belatedPNG」](https://www.webantena.net/wp-content/uploads/2012/12/belatedpng.png)
以前にも紹介させていただいた DD_belatedPNG_0.0.8a.js ですが、
IE6、IE7 には対応していますがIE8 では動いてくれない…
ですので、がっつりIE下位バージョンに対応させようとなると、今回紹介させていただくjQueryベースのスクリプト jquery.belatedPNG.js を利用します。
続きを読む
Lightboxの ように画像をオーバーレイで拡大表示できるjQuery プラグイン Fancybox。
この手のプラグインは他にも色々ありますが、Fancybox の魅力は画像以外にもYoutube 動画もLightbox風に表示できるという「汎用性の高さ」と、画像拡大時のエフェクトを調整できたり、サムネイル付きのイメージギャラリーができるなどの「カスタマイズのしやすさ」かなと思います。
続きを読む
![[JS]IE6 でも :hover 疑似クラスが使えるなど、IE の HTML/CSS 表示を調整するライブラリ「IE7.js」](https://www.webantena.net/wp-content/uploads/2013/02/ie.png)
IE6 でも :hover や :first-child の一部擬似クラスを使えたり、透過PNGの画像が使えるなど、ちょっと便利かも知れないライブラリ「IE7.js」。
今回は IE7.js の設置方法から、IE7.js を使って何か出来るのか？を簡単にまとめました。
続きを読む
リンク画像にマウスを乗せると滑らかなロールオーバーを実現させることができるjavascript が smoothRollOver です。
ロールオーバー前と後の2種類の画像を用意して、smoothRollOver のファイルを<head> 内に読み込ませるだけで動きますし、IE6 にも対応しているので嬉しいです。
続きを読む
![[JS]Flashを埋め込む際の便利なJavascript「SWFObject」](https://www.webantena.net/wp-content/uploads/2012/11/flash.jpg)
サイトにSWFファイル（Flash）を埋め込む際の便利なJavascriptが「SWFObject」です。
設置が簡単な点はもちろんですが、Flash に対応していない環境（iPad とか iPhone とか）向けに、画像やテキストで代替表示できる点も、未だにSWFObject が手放せない要因です。
続きを読む
![[JS]<table> をレスポンシブWEBデザイン対応させるjQueryプラグイン「FooTable」](https://www.webantena.net/wp-content/uploads/2012/10/footable.jpg)
ホームページやWEBサイトを作っていると、<table> を使った表組みというのはまだまだ健在です。
しかし、iPad やスマホでサイトを見る機会も増えたことで、今までのようなPCサイト向けに表示させていた <table> をレスポンシブWEBデザイン対応させることが多くなってきていると思います。
続きを読む
![[JS]画像をオーバーレイ表示できる「Lightbox」の新バージョン2.5 の使い方](https://www.webantena.net/wp-content/uploads/2012/09/lightbox25.png)
![[JS]画面の右や左から、ダイナミックにメニューをスライド表示できるjQueryプラグイン「PageSlide」](https://www.webantena.net/wp-content/uploads/2013/04/jquerypageslide.png)
スマホアプリで「ボタンをタッチして画面の左や右からメニューがスライド表示される」みたいない動きをよく見ます。
ブラウザの見えない所からダイナミックにコンテンツをスライド表示させる動きを、PCサイトでも実装可能にしてくれるjQueryプラグインが「PageSlide」です。
続きを読む
![[JS]HTML5でマークアップする際に「html5shiv」でIE下位バージョンにも対応させる](https://www.webantena.net/wp-content/uploads/2012/10/html5.png)
HTML5 でマークアップをする場合、IE下位バージョン（8以下）がそもそもHTML5のタグが対応していない…という理由で、IE8以下でもHTML5 のタグを使えるようにするためのjavascript html5shiv.js を使う機会も多いと思います。
そこまでしてIE下位バージョンに対応させる必要があるか？については今回は置いておいて、html5shiv の簡単な取り扱い方を紹介します。
続きを読む
![[JS]シンプルなドロップダウンメニューが簡単に実装できるjQueryプラグイン「Droppy」](https://www.webantena.net/wp-content/uploads/2012/08/jquerydroppy.png)
ヘッダーのグローバルメニュー等で、マウスオーバーによるドロップダウンメニューを実現させるためのjQueryプラグイン「Droppy」。
シンプルなプラグインなので手軽に設定できますし、メニューの階層が深い場合でも入れ子のドロップダウンメニューが実装可能です。
続きを読む
![[JS]SimpleModal と jQuery Cookie による認証ボックスの実装方法](https://www.webantena.net/wp-content/uploads/2012/07/simplemodalauthbox.png)
18禁サイトのように、サイト訪問時に年齢確認などのアラートボックスを表示させ、「認証」ボタンを押したら次回のアクセス時からはアラートを出さないようにする、という処理のご紹介です。
続きを読む
