画像ギャラリーを実装できる「Galleria」Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな~と思い試してみました。ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグインレスポンシブ対応の画像スライダー・ギャラリー用プラグインスワイプ対応の画像スライダー・ギャラリー用プラグインダウンロードはこちらから(バージョン:1.4.2)CDNを使用する場合はこちらから使用できます。option);</script>Galleria.loadThemeギャラリーのテーマ(galleria.classic.min.js)を読み込みます。**スクリプトのパスは適宜置き換えて下さい。テーマは色々と用意されているみたいです。(classic以外は有料)optionオプションを指定します。ギャラリーのサイズとなるwidthとheightは最低限指定して下さい。いうエラーがでていたのですが、いつの間にかでなくなりました。どんなときにでるのだろうか。オプション・カスタマイズレスポンシブ化Galleriaはデフォルトでレスポンシブ対応していて、設定は必要ありません。ギャラリーの幅を指定する場合は、divのstyleにwidthをパーセンテージで指定して下さい。(+コード)JSの変更部分は、実際にギャラリー内の各骨組み部分を生成する部分で、キャプションの部分である'info'(.galleria-info)を'thumbnails-container'(.galleria-thumbnails-container)内に入れ込みます。Structureを参照CSSの変更部分は、.galleria-stage(画像表示部分)のbottomをキャプション挿入(.galleria-info)分上げます。その分、.galleria-thumbnails-containerの高さを上げます。.galleria-infoのpositionのabsoluteをはずしてください。galleria-info-descriptionなど、色々ずらしていってもできます。強引にやってみましたが、いい方法をご存知の方がいらっしゃればご教授いただければと思います。レスポンシブ対応の画像スライダー・ギャラリー用プラグインTweet関連記事スワイプ対応の画像スライダー・ギャラリー用プラグイン画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からスワイプ操作で画像をスライドできるものをいくつか集めてみました。numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。チェックまで限定してくれます。Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。Datepickerわずかなコードで画像をサムネイル化してくれる「MyThumbnail.js」サムネイル化してくれるJQueryプラグインは数多くありますが、この「MyThumbnail」はわずか数行で簡単にページ上の画像を指定サイズにサムネイル化してくれます。カスタマイズ以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。シンプルに実装できます。「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。1.10.2で動作確認のできたものに限定しています。Popoversレスポンシブにも対応したカレンダーを表示する「Calendario.js」Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。PMコメントありがとうございます。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。