isotope фильтрация по вкладке
Привет всем!
Помогите пожалуйста сделать так, чтобы при загрузке страницы была стартовая фильтрация по categ-0 <a href="#" data-filter=".categ-0" class=" active"><h2>Все модели</h2></a>, а не со всеми изображениями Есть скрипт // ISOTOPE // if ((typeof $.fn.imagesLoaded !== 'undefined') && (typeof $.fn.isotope !== 'undefined')) { $(".isotope").imagesLoaded( function() { var container = $(".isotope"); container.isotope({ itemSelector: '.isotope-item', layoutMode: 'masonry', transitionDuration: '0.8s' }); $(".filter li a").on("click", function() { $(".filter li a").addClass("active"); var selector = $(this).attr("data-filter"); container.isotope({ filter: selector }); return false; }); $(window).resize(function() { container.isotope(); }); }); } и html <div class="container"> <div class="row"> <div class="col-sm-12"> <ul class="filter"> <li> <a href="#" data-filter=".categ-0" class=" active"><h2>Все модели</h2></a> </li> <li> <a href="#" data-filter=".categ-1"><h2>Смартфоны</h2></a> </li> <li> <a href="#" data-filter=".categ-2"><h2>Планшеты</h2></a> </li> <li> <a href="#" data-filter=".categ-3"><h2>Ноутбуки</h2></a> </li> <li> <a href="#" data-filter=".categ-4"><h2>ПК</h2></a> </li> </ul> </div><!-- col --> </div><!-- row --> </div><!-- container --> <br> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="isotope col-3 gutter"> <div class="isotope-item categ-0"> <div class="portfolio-item"> <div class="portfolio-item-thumbnail"> <img src="images\brands\Apple.png" alt=""> <div class="portfolio-item-hover"> <div class="portfolio-item-description"> <h4><a href="portfolio-single.htm">Смартфоны</a></h4> <h4><a href="portfolio-single.htm">Планшеты</a></h4> <p>Photography</p> </div><!-- portfolio-item-description --> <a class="fancybox zoom-action" data-fancybox-group="portfolio" href="images\brands\Apple.png">+</a> </div><!-- portfolio-item-hover --> </div><!-- portfolio-item-thumbnail --> </div><!-- portfolio-item --> </div><!-- isotope-item --> <div class="isotope-item categ-2"> <div class="portfolio-item"> <div class="portfolio-item-thumbnail"> <img src="images\brands\Apple.png" alt=""> <div class="portfolio-item-hover"> <div class="portfolio-item-description"> <h4><a href="portfolio-single.htm">Apple iPad NEW</a></h4> <h4><a href="portfolio-single.htm">A View Over the Bridge</a></h4> <p>Photography</p> </div><!-- portfolio-item-description --> </div><!-- portfolio-item-hover --> </div><!-- portfolio-item-thumbnail --> </div><!-- portfolio-item --> </div><!-- isotope-item --> <div class="isotope-item categ-1 categ-3"> <div class="portfolio-item"> <div class="portfolio-item-thumbnail"> <img src="images\portfolio\image-18.jpg" alt=""> <div class="portfolio-item-hover"> <div class="portfolio-item-description"> <h4><a href="portfolio-single.htm">Golden Gate</a></h4> <p>Photography</p> </div><!-- portfolio-item-description --> </div><!-- portfolio-item-hover --> </div><!-- portfolio-item-thumbnail --> </div><!-- portfolio-item --> </div><!-- isotope-item --> <div class="isotope-item categ-1 categ-4"> <div class="portfolio-item"> <div class="portfolio-item-thumbnail"> <img src="images\portfolio\image-19.jpg" alt=""> <div class="portfolio-item-hover"> <div class="portfolio-item-description"> <h4><a href="portfolio-single.htm">Old Men on Bench</a></h4> <p>Photography</p> </div><!-- portfolio-item-description --> </div><!-- portfolio-item-hover --> </div><!-- portfolio-item-thumbnail --> </div><!-- portfolio-item --> </div><!-- isotope-item --> <div class="isotope-item categ-3 categ-4"> <div class="portfolio-item"> <div class="portfolio-item-thumbnail"> <img src="images\portfolio\image-20.jpg" alt=""> <div class="portfolio-item-hover"> <div class="portfolio-item-description"> <h4><a href="portfolio-single.htm">Mockup: Open Book</a></h4> <p>Photography</p> </div><!-- portfolio-item-description --> </div><!-- portfolio-item-hover --> </div><!-- portfolio-item-thumbnail --> </div><!-- portfolio-item --> </div><!-- isotope-item --> <div class="isotope-item categ-1 categ-2"> <div class="portfolio-item"> <div class="portfolio-item-thumbnail"> <img src="images\portfolio\image-21.jpg" alt=""> <div class="portfolio-item-hover"> <div class="portfolio-item-description"> <h4><a href="portfolio-single.htm">Mockup: Travel Magazine</a></h4> <p>Photography</p> </div><!-- portfolio-item-description --> </div><!-- portfolio-item-hover --> </div><!-- portfolio-item-thumbnail --> </div><!-- portfolio-item --> </div><!-- isotope-item --> <div class="isotope-item categ-2 categ-3"> <div class="portfolio-item"> <div class="portfolio-item-thumbnail"> <img src="images\portfolio\image-22.jpg" alt=""> <div class="portfolio-item-hover"> <div class="portfolio-item-description"> <h4><a href="portfolio-single.htm">Product Photography</a></h4> <p>Photography</p> </div><!-- portfolio-item-description --> </div><!-- portfolio-item-hover --> </div><!-- portfolio-item-thumbnail --> </div><!-- portfolio-item --> </div><!-- isotope-item --> <div class="isotope-item categ-1 categ-2 categ-4"> <div class="portfolio-item"> <div class="portfolio-item-thumbnail"> <img src="images\portfolio\image-23.jpg" alt=""> <div class="portfolio-item-hover"> <div class="portfolio-item-description"> <h4><a href="portfolio-single.htm">Statue of Liberty</a></h4> <p>Photography</p> </div><!-- portfolio-item-description --> </div><!-- portfolio-item-hover --> </div><!-- portfolio-item-thumbnail --> </div><!-- portfolio-item --> </div><!-- isotope-item --> <div class="isotope-item categ-2 categ-3 categ-4"> <div class="portfolio-item"> <div class="portfolio-item-thumbnail"> <img src="images\portfolio\image-24.jpg" alt=""> <div class="portfolio-item-hover"> <div class="portfolio-item-description"> <h4><a href="portfolio-single.htm">Mockup: Book Covers</a></h4> <p>Photography</p> </div><!-- portfolio-item-description --> </div><!-- portfolio-item-hover --> </div><!-- portfolio-item-thumbnail --> </div><!-- portfolio-item --> </div><!-- isotope-item --> <div class="isotope-item categ-1 categ-3"> <div class="portfolio-item"> <div class="portfolio-item-thumbnail"> <img src="images\portfolio\image-25.jpg" alt=""> <div class="portfolio-item-hover"> <div class="portfolio-item-description"> <h4><a href="portfolio-single.htm">Most Iconic Buildings</a></h4> <p>Photography</p> </div><!-- portfolio-item-description --> </div><!-- portfolio-item-hover --> </div><!-- portfolio-item-thumbnail --> </div><!-- portfolio-item --> </div><!-- isotope-item --> </div><!-- isotope --> </div><!-- col --> </div><!-- row --> </div><!-- container --> |
перед кликом пробуйтепрописать
container.isotope({ filter: '.categ-0' }); //^^^^^^^^^^ $(".filter li a").on("click", function() { |
Спасибо! Заработало!
|
Часовой пояс GMT +3, время: 21:04. |