画像ギャラリーを実装できる「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など、色々ずらしていってもできます。強引にやってみましたが、いい方法をご存知の方がいらっしゃればご教授いただければと思います。「jTruncate」は、長くなってスペースをとってしまう文章をなどであらかじめ指定した文字数で省略して表示してくれるjQueryプラグインです。Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。「Rondell」は、様々なタイプの画像ギャラリーを実装してくれるjQueryプラグインです。カルーセル・スライダー・ギャラリーなど一通り実装可能です。「mailcheck.js」は、入力されたメールアドレスのドメインをサジェストしてくれるjQueryプラグインです。Flowのように左右に流れるギャラリーが実装できるjQueryプラグインです。実装シンプルな画像スライダー/ギャラリー用プラグインスライダーやギャラリーを実装できるjQueryプラグインのうちシンプルなものを集めてみました。ベースはシンプルですが、オプションなどを使用してカスタマイズが豊富なものもたくさんありますね。1.10.2で動作確認のできたものに限定しています。imgタグの#alt属性から自動でキャプションを生成selectボックスを華麗にしてくれる「Chosen」「Select2」selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。PMコメントありがとうございます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。