Isotope to bardzo dobry plugin jQuery który pozwala na tworzenie bardzo fajnych animowanych animacji (masonry) , można je filtrować oraz sortować. Plugin jest do ściągnięcia ze strony Isotope bezpłatny do własnego wykorzystania. ( do wykorzystania komercyjnego 25 $ , w przypadku organizacji 90 $ ). Do stworzenia tego przewodnika użyłem bardzo dobrego instruktarzu napasanego przez Alicję Ramirez Delikatnie modyfikując na swoje potrzeby.
Edytowany: 17 Kwietnia 2016
1. Ściągamy skrypt ze strony Isotope
- Mamy dwa sposoby na podpięcie skryptu do naszego kodu.
- umieszczamy link bezpośrednio do biblioteki Isotope
- Ściągamy isotope.pkgd.js un-minified lub isotope.pkgd.min.js minified ( minified – to plik formie skompensowanej z usuniętymi niepotrzebnymi znakami dla programisty nieczytelny ale dla komputera bez znaczenia dzięki kompensacji plik jest szybciej „czytany” )
2. Wklejam skrypt do sortowania wyświetli kategorie.
3. Tworzę niestandardowy loop dla wyświetlanych wpisów. Każdy blok post musi mieć mieć własną „class” w moim przypadku skorzystałem z „item” . Kolejna klasa dla to „filter” ( z listy kagegori z punktu 3.
4. Dobra teraz można sprawdzić czy działa powinieneś mieć listę kategorii oraz poniżej wyświetlone posty. Należy sprawdzić za pomocą kodu źródłowego czy wszystkie „class”- (items) się zgadzają w moim przypadku miałem problem z ustawieniem w Genesis.
5. I teraz przyszła pora na podpięcie właściwego skryptu który da niezbędny efekt. Właściwym sposobem jest stworzenie pliku o nazwie np. isotope.js i umieszczenie w folderze gdzie znajdują się skrypty w szablonu wordpress. w moim przypadku ścieżka wygląda (/js/isotope.js)
jQuery(function ($) { var $container = $('#isotope-list'); //The ID for the list with all the blog posts $container.isotope({ //Isotope options, 'item' matches the class in the PHP itemSelector : '.item', layoutMode : 'masonry' }); //Add the class selected to the item that is clicked, and remove from the others var $optionSets = $('#filters'), $optionLinks = $optionSets.find('a'); $optionLinks.click(function(){ var $this = $(this); // don't proceed if already selected if ( $this.hasClass('selected') ) { return false; } var $optionSet = $this.parents('#filters'); $optionSets.find('.selected').removeClass('selected'); $this.addClass('selected'); //When an item is clicked, sort the items. var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector }); return false; }); });
W moim przypadku postąpiłem trochę inaczej i zamieściłem skrypt w pliku.
6. Jeszcze zostało nadać odpowiedni wygląd za pomocą CSS
/* Start: Recommended isotope-list styles */ /*kategorie */ #filters { padding: 30px; margin-bottom: 10px; } #filters li { color: #999; list-style: none; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } #filters li { float: left; } #filters li:first-child { margin-left: 0; } #filters li a { color: #555; display: block; padding: 0.5rem 1rem; text-decoration: none; border-bottom: none; font-size: 1.5rem; font-weight: 300; border-top: 4px solid #fff; } #filters li a:hover, #filters li a.selected { border-top: 4px solid #ff4800; } /* ---- grid ---- */ #isotope-list { margin: 0 auto; /* centrujemy */ margin-top: 5px; } /* clear fix */ #isotope-list:after { content: ''; display: block; clear: both; } .item { width: 32%; } /* ---- .grid-item ---- */ .item { float: left; height: auto; width: auto background: #0D8; padding: 0.25%; margin-left: 1%; margin-bottom: 1%; } .item img:hover { transform: scale(1.09); -moz-transform: scale(1.09); -webkit-transform: scale(1.09); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; opacity: 0.2; } #isotope-list div h4 { white-space: pre-wrap; position: absolute; z-index: 10; top: 10px; left: 10px; padding-right: 10px; } /* ---- media query dla prawidłowego wyświetlania na różnych urządzeniach ---- */ @media only screen and (max-width: 880px) { .item { width: 48%; } #isotope-list { margin-top: 55px; } @media screen and (max-width: 450px) { .item { width: 100%; } #isotope-list { margin-top: 55px; }
6. W pliku function.php zamieszczamy funkcję odpowiedzialną za ładowanie skryptów
function add_isotope() { wp_register_script( 'isotope', get_template_directory_uri().'/js/libs/jquery.isotope.min.js', array('jquery'), true ); wp_register_script( 'isotope-init', get_template_directory_uri().'/js/isotope.js', array('jquery', 'isotope'), true ); wp_register_style( 'isotope-css', get_stylesheet_directory_uri() . '/css/isotope.css' ); /* dodajemy jeśli umieszczamy style w oddzielnym pliku */ wp_enqueue_script('isotope-init'); wp_enqueue_style('isotope-css'); } add_action( 'wp_enqueue_scripts', 'add_isotope' );
Share Your Thoughts