【jQuery】超高機能ギャラリー[MixItUp]の使い方。Tags【jQuery】超高機能ギャラリー[MixItUp]の使い方。ONZEhttps://on-ze.com/archives/931HomeBlog【jQuery】超高機能ギャラリー[MixItUp]の使い方。Googleフィルターをかけられたり、ソートもできる超高機能jQueryギャラリー[MixItUp]の紹介です。公式サイトからプラグイン本体をダウンロードしてきましょう。https://www.kunkalabs.com/mixitup/ダウンロードしてきたファイル(jquery.mixitup.js)を、jQuery本体とともに<head>〜</head>タグ内で読み込みます。その後、<body>〜</body>の中にギャラリー部のコンテンツを記述します。class="gap"></div>というコードを記述して、空のボックスを2つ作っています。実はコレが意外と重要なポイントになります。利用するため、あえて空の要素を作っておかないと表示が崩れる原因になってしまうからです。続いてはjQueryの設定です。$(function(){$('#Container').mixItUp();});ここではギャラリー内のコンテンツを内包する要素[#container]を指定します。いくつかのオプションも設定できるようになっています。基本的な要素の操作に関するオプションは以下の6つが用意されていますね。animationcallbackscontrolslayoutloadselectorsその他、細かい設定のためのAPIメソッドも各種用意されています。この辺りの詳しい情報は公式サイトをご覧いただいたほうが早いかもしれませんね。Documentation最後にスタイルシートです。効かせる要素に対して「display:none;」を指定すること。しておかないと表示がズレたり、おかしな挙動になってしまったりと、エラーの原因になります。{display:none;}また前述のとおり、親要素には「text-align:justify;」を効かせておきます。簡単に紹介しましたが、基本的には中級者〜向けのjQueryプラグインです。記載したコードをコピペすれば初心者の方でも充分に使いこなせると思います。サンプルも用意したので合わせてご覧ください。サンプル:MixItUpお気付きのとおり[Masonry]に似た動きをしますね。TwitterFacebookGoogle+FeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【jQuery】メニューが横からスライドして表示される[Drawer]の使い方。【jQuery】超簡単jQueryスライダー[bxSlider]の使い方。使い方をマスターする。反応速度向上のために「タッチイベント」を活用する方法。