Mixitup достаточно удобен для фильтации и сортировки элементов на сайте. Помимо функционала фильтрация осуществляется с впечатляющей анимацией. Все прекрасно, но возник случай, когда понадобилось разместить на странице 2 разных блока с mixitup. Т.е два независимых набора элементов, в которых сортировка происходит по своим категориям. В связи с невероятно малым количеством информацией по данной проблеме я поделюсь ей с вами.
Все исходники для mixitup’а вы можете найти на их официально странице https://www.kunkalabs.com/mixitup/
jQuery
1 |
<script src="js/jquery-3.2.1.min.js"></script> |
И сам Mixitup
1 |
<script src="js/mixitup.min.js"></script> |
В блоках с элементами главное указать data-ref="container-1" и data-ref="container-2" для дальнейшего их отличия. И после блоков с помощью <script> подключить необходимые mixitup блоки.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<div class="portfolio"> <h2>Портфолио 1</h2> <div data-ref="container-1"> <ul> <li data-filter="all">Все</li> <li data-filter=".category-1">Категория 1</li> <li data-filter=".category-2">Категория 2</li> </ul> <div class="flex-block"> <div class="mix category-1 portfolio-item" style="background-image: url('https://static.pexels.com/photos/6444/pencil-typography-black-design.jpg');"> </div> <div class="mix category-1 portfolio-item" style="background-image: url('https://static.pexels.com/photos/285814/pexels-photo-285814.jpeg');"> </div> <div class="mix category-2 portfolio-item" style="background-image: url('https://static.pexels.com/photos/6253/city-street-typography-design.jpg');"> </div> </div> </div> </div> <div class="portfolio"> <h2>Пртфолио 2</h2> <div data-ref="container-2"> <ul> <li data-filter="all">Все</li> <li data-filter=".category-1">Категория 1</li> <li data-filter=".category-2">Категория 2</li> </ul> <div class="flex-block"> <div class="mix category-1 portfolio-item" style="background-image: url('https://static.pexels.com/photos/436775/pexels-photo-436775.jpeg');"> </div> <div class="mix category-1 portfolio-item" style="background-image: url('https://static.pexels.com/photos/56759/pexels-photo-56759.jpeg');"> </div> <div class="mix category-2 portfolio-item" style="background-image: url('https://static.pexels.com/photos/270859/pexels-photo-270859.jpeg');"> </div> <div class="mix category-2 portfolio-item" style="background-image: url('https://static.pexels.com/photos/171201/pexels-photo-171201.jpeg');"> </div> </div> </div> </div> <script> var containerEl1 = document.querySelector('[data-ref="container-1"]'); var containerEl2 = document.querySelector('[data-ref="container-2"]'); var config = { controls: { scope: 'local' } }; var mixer1 = mixitup(containerEl1, config); var mixer2 = mixitup(containerEl2, config); </script> |
И на этом все. Это будет достаточно, чтобы подключить два или более сортируемых блоков mixitup на одной странице.