Categoryイメージギャラリー

スマホでもデスクトップでも使える横スクロールスライダー『Portfoliojs』jQueryギャラリープラグイン

Portfoliojs

今回は、デスクトップでもタブレットでもスマホにでも使えるイメージスライダー『Portfoliojs』を紹介します。

このjQueryギャラリープラグイン『Portfoliojs』の特徴は、スマホやタブレット上で指でスワイプして次の画像にスライドできる点。もちろんマウスでもキーボードでもスライドすることができます。

サンプルを作ってみました。見て頂いたほうが分かりやすいと思います。

レスポンシブデザインにぴったりな横スクロールスライダー『Portfoliojs』サンプル


スマホでみてみると、Facebookのタイムライン上でアルバム画像をみた感じに似てますね。狭い画面を有効に活用できるのでとても便利です。

→「スマホでもデスクトップでも使える横スクロールスライダー『Portfoliojs』jQueryギャラリープラグイン」の続きを読む

タッチデバイス対応のスライダーjQueryプラグイン「Glide.js」

jQueryプラグイン「Glide.js」を利用すれば、スマホ・タブレット・デスクトップに対応したスライドショーを簡単に設置することができます。

特徴は、スマホなどの画面からスライダーを指でスワイプすることで画像などのコンテンツを切り替えれることです。また4.5kbと超軽量なのでサクサク動きます。

画面の大きさによって自動的にサイズが切り替わるレスポンシブになっています。

タッチデバイスと相性が良いスライダーでは、今のところこのjQueryプラグイン「Glide.js」が一番かもしれません。

サンプルを作ってみました。

タッチデバイス対応のスライダーjQueryプラグイン「Glide.js」サンプル

オールドブラウザでも動くように配慮してあるとのこと。スワイプだけでなくキーボードの矢印キーやスライダー上のメニューからも切り替えることができます。

→「タッチデバイス対応のスライダーjQueryプラグイン「Glide.js」」の続きを読む

シンプルなサムネイル画像つきスライダーjQueryプラグイン「AD Gallery」


AD Gallery

今まで、サムネイル付きスライダーを紹介したことなかったので、今回はサムネイル画像を表示させた画像スライダーをご紹介します。

最近、動きが凝ったjQueryのスライダー用のjQueryプラグインもいろいろ登場していますが、シンプルなサムネイル付きスライダー用のjQueryプラグインが必要なこともあるかと思います。

設置も難しくないですので、トップ画像に利用したり、ギャラリーにしたりと用途は広いです。

サンプルを作ってみました。

シンプルなサムネイル画像つきスライダーjQueryプラグイン「AD Gallery」サンプル


各ブラウザにも対応しています。軽くて設置もしやすいので、おすすめのスライダーです。

Firefox 3.5以降 , IE6以降, Chrome2以降 , Safari4以降, Opera9以降に対応しています。

→「シンプルなサムネイル画像つきスライダーjQueryプラグイン「AD Gallery」」の続きを読む

jQueryスライドショー「Camera slideshow」をフルスクリーンで背景にする方法



高機能過ぎるjQueryスライドショー「Camera slideshow」という記事でご紹介したスライドショー「Camera slideshow」をフルスクリーンで背景にする方法をご紹介します。

サンプルを作ってみました。ご覧下さい。

「Camera slideshow」をフルスクリーンで背景にするサンプル


フルスクリーン用のスタイルを追加してあげる必要がありますが、比較的簡単に導入できると思います。良い感じのフルスクリーンスライドショーになります。どうぞお試し下さい。

→「jQueryスライドショー「Camera slideshow」をフルスクリーンで背景にする方法」の続きを読む

画像ファイルをアップロードして表示する『jQuery File Upload』


jQuery File Upload Plugin

今回紹介するのは、画像ファイルをアップロードして表示することができる『jQuery File Upload』です。

ドラッグ・アンド・ドロップにも対応していて、アップロード中のプログレスバーの表示やアップロードされた画像のプレビューも可能です。

必要なファイルがパッケージ化されているので、ほとんどそのまま使用できます。

※他人のパソコンからファイルをサーバーにアップすることができるものです。セキュリティー対策は充分に行なって下さい。

→「画像ファイルをアップロードして表示する『jQuery File Upload』」の続きを読む

タイル上に並べて、画像を切り替えるグリッドタイプ画像ギャラリーjQueryプラグイン「Animated Responsive Image Grid」


Animated Responsive Image Grid

画像をタイル上に並べて、一枚ずつの画像を色々なアニメーション効果で切り替えて見せることができるのが「Animated Responsive Image Grid」です。

レスポンシブ対応になっていて、様々なデバイスのディスプレイに合わせて表示されます。

サンプルを見て頂くとわかりやすいと思います。

→ タイル上に並べて、画像を切り替えるグリッドタイプ画像ギャラリー「Animated Responsive Image Grid」サンプルその1

→ タイル上に並べて、画像を切り替えるグリッドタイプ画像ギャラリー「Animated Responsive Image Grid」サンプルその2


オプションを変更することで、多彩なエフェクト効果が可能になっています。

→「タイル上に並べて、画像を切り替えるグリッドタイプ画像ギャラリーjQueryプラグイン「Animated Responsive Image Grid」」の続きを読む

Pinterest(ピンタレスト)風に画像を並べて表示するjQueryプラグイン「BlocksIt.js」


最近、特に女性に人気があるPinterest(ピンタレスト)。
その人気の秘密のひとつが、そのシンプルでお洒落なデザイン性です。

Pinterest(ピンタレスト)は白地に画像がずらりと並んだビジュアル中心のデザインになっていて、とてもシンプルですが、ファッション誌のようでただ眺めているだけでも退屈しません。

そのPinterest(ピンタレスト)風に画像を一覧表示させてくれるのが、このjQueryプラグイン「BlocksIt.js」です。

サンプルページを作ってみました。

→ Pinterest(ピンタレスト)風に画像を並べて表示するjQueryプラグイン「BlocksIt.js」サンプル


jQueryプラグイン「BlocksIt.js」の使用方法は続きをどうぞ。

→「Pinterest(ピンタレスト)風に画像を並べて表示するjQueryプラグイン「BlocksIt.js」」の続きを読む

画像、動画、Googleマップ… あらゆるメディアをLightBox(ライトボックス)風に表示させる「mediaboxAdvanced」


mediaboxAdvanced

お洒落なホームページにはよく別窓でかっこよく画像を表示するLightBoxが使われています。しかし普通のLightBoxだと画像に限られてしまいます。

ところがこの「mediaboxAdvanced」は、画像だけでなく動画やYouTubeなどの動画サイト・Twitter・facebookなどのソーシャルビデオ、Flashメディア・Google Map・HTMLなど、ほとんどのオンラインメディアに対応して、LightBox風に表示してくれます。

サンプルを用意しました。

→ あらゆるメディアをLightBox風に表示させるJavaScript「mediaboxAdvanced」サンプルページ


では、この「mediaboxAdvanced」の使い方は続きをどうぞ。

→「画像、動画、Googleマップ… あらゆるメディアをLightBox(ライトボックス)風に表示させる「mediaboxAdvanced」」の続きを読む

ライトボックス風な雰囲気のスライドイメージギャラリー「jQuery.popeye 2.1」

画像をクリックするとニュルッとアニメーションして画像が拡大されるLightBoxというのがありますが、その機能とイメージギャラリーを組み合わせたようなイメージギャラリーが作れるjQueryプラグインです。

サンプルをみてもらったら分かると思います。

→ サンプルページ


あまりスペースのないところにイメージギャラリーを置きたかったり、インパクトのある画像の見せ方をしたいときに使えそうです。

→「ライトボックス風な雰囲気のスライドイメージギャラリー「jQuery.popeye 2.1」」の続きを読む