div要素にして画像もテキストもリンクもまとめてスライドさせる「jQuery Slider2」
高機能過ぎるjQueryスライドショー「Camera slideshow」
ページをめくり効果が美しい。雑誌や本のようにページをめくれるjQueryプラグイン「turn.js」
シンプルなサムネイル画像つきスライダーjQueryプラグイン「AD Gallery」
ルーレット風なものが作れるjQueryプラグイン「Roulette.js 」
クリックすると横からメニューが現れるjQueryプラグイン『Sidr』
レスポンシブでふわっと表示されるドロップダウンメニューを実装する「Responsive Multi-Level Menu」
超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』
クリックするとメニューが上から現れる『Top Drawer – A smooth dropdown menu for responsive web design』
ページの背景に画像をフルスクリーンで表示させ、画像の切り替えも可能なjQueryプラグイン「Backstretch」
今回は、デスクトップでもタブレットでもスマホにでも使えるイメージスライダー『Portfoliojs』を紹介します。
このjQueryギャラリープラグイン『Portfoliojs』の特徴は、スマホやタブレット上で指でスワイプして次の画像にスライドできる点。もちろんマウスでもキーボードでもスライドすることができます。
サンプルを作ってみました。見て頂いたほうが分かりやすいと思います。
スマホでみてみると、Facebookのタイムライン上でアルバム画像をみた感じに似てますね。狭い画面を有効に活用できるのでとても便利です。
→「スマホでもデスクトップでも使える横スクロールスライダー『Portfoliojs』jQueryギャラリープラグイン」の続きを読む
jQueryプラグイン「Glide.js」を利用すれば、スマホ・タブレット・デスクトップに対応したスライドショーを簡単に設置することができます。
特徴は、スマホなどの画面からスライダーを指でスワイプすることで画像などのコンテンツを切り替えれることです。また4.5kbと超軽量なのでサクサク動きます。
画面の大きさによって自動的にサイズが切り替わるレスポンシブになっています。
タッチデバイスと相性が良いスライダーでは、今のところこのjQueryプラグイン「Glide.js」が一番かもしれません。
サンプルを作ってみました。
オールドブラウザでも動くように配慮してあるとのこと。スワイプだけでなくキーボードの矢印キーやスライダー上のメニューからも切り替えることができます。
今まで、サムネイル付きスライダーを紹介したことなかったので、今回はサムネイル画像を表示させた画像スライダーをご紹介します。
最近、動きが凝ったjQueryのスライダー用のjQueryプラグインもいろいろ登場していますが、シンプルなサムネイル付きスライダー用のjQueryプラグインが必要なこともあるかと思います。
設置も難しくないですので、トップ画像に利用したり、ギャラリーにしたりと用途は広いです。
サンプルを作ってみました。
各ブラウザにも対応しています。軽くて設置もしやすいので、おすすめのスライダーです。
Firefox 3.5以降 , IE6以降, Chrome2以降 , Safari4以降, Opera9以降に対応しています。
高機能過ぎるjQueryスライドショー「Camera slideshow」という記事でご紹介したスライドショー「Camera slideshow」をフルスクリーンで背景にする方法をご紹介します。
サンプルを作ってみました。ご覧下さい。
フルスクリーン用のスタイルを追加してあげる必要がありますが、比較的簡単に導入できると思います。良い感じのフルスクリーンスライドショーになります。どうぞお試し下さい。
今回紹介するのは、画像ファイルをアップロードして表示することができる『jQuery File Upload』です。
ドラッグ・アンド・ドロップにも対応していて、アップロード中のプログレスバーの表示やアップロードされた画像のプレビューも可能です。
必要なファイルがパッケージ化されているので、ほとんどそのまま使用できます。
※他人のパソコンからファイルをサーバーにアップすることができるものです。セキュリティー対策は充分に行なって下さい。
Animated Responsive Image Grid
画像をタイル上に並べて、一枚ずつの画像を色々なアニメーション効果で切り替えて見せることができるのが「Animated Responsive Image Grid」です。
レスポンシブ対応になっていて、様々なデバイスのディスプレイに合わせて表示されます。
サンプルを見て頂くとわかりやすいと思います。
オプションを変更することで、多彩なエフェクト効果が可能になっています。
→「タイル上に並べて、画像を切り替えるグリッドタイプ画像ギャラリーjQueryプラグイン「Animated Responsive Image Grid」」の続きを読む
最近、特に女性に人気があるPinterest（ピンタレスト）。
その人気の秘密のひとつが、そのシンプルでお洒落なデザイン性です。
Pinterest（ピンタレスト）は白地に画像がずらりと並んだビジュアル中心のデザインになっていて、とてもシンプルですが、ファッション誌のようでただ眺めているだけでも退屈しません。
そのPinterest（ピンタレスト）風に画像を一覧表示させてくれるのが、このjQueryプラグイン「BlocksIt.js」です。
サンプルページを作ってみました。
jQueryプラグイン「BlocksIt.js」の使用方法は続きをどうぞ。
→「Pinterest（ピンタレスト）風に画像を並べて表示するjQueryプラグイン「BlocksIt.js」」の続きを読む
お洒落なホームページにはよく別窓でかっこよく画像を表示するLightBoxが使われています。しかし普通のLightBoxだと画像に限られてしまいます。
ところがこの「mediaboxAdvanced」は、画像だけでなく動画やYouTubeなどの動画サイト・Twitter・facebookなどのソーシャルビデオ、Flashメディア・Google Map・HTMLなど、ほとんどのオンラインメディアに対応して、LightBox風に表示してくれます。
サンプルを用意しました。
では、この「mediaboxAdvanced」の使い方は続きをどうぞ。
→「画像、動画、Googleマップ… あらゆるメディアをLightBox（ライトボックス）風に表示させる「mediaboxAdvanced」」の続きを読む
© 2024 ぱんにゃっとTutorial
Theme by Anders Norén — Up ↑