noname02

isotope 플러그인 var foo = $('...').isotope({isInitLayout: false;...}); isInitLayout 옵션을 주면 최초에 레이아웃을 설정하지 않는다.그 다음 이것저것 설정한 뒤, foo.isotope(); 를 하면 레이아웃을 설정한다.맨 처음 화면이 켜질 때 window의 사이즈가 뒤바뀌면서 스크립트로 css설정이 뒤죽박죽 되는 경우(크기의 미세한 차이가 발생) 사용하면 매우 좋다.

WordPress 카테고리를 가져오는 함수 : get_categories();매개변수로 여러가지 옵션을 줄 수 있다. API문서 참고하면 됨. get_the_category는 the_post()로 받아온 하나 하나의 카테고리를 가져오는데 이 때 한 포스트에는 카테고리가 여러개 존재 가능하므로 foreach문으로 전부 출력해줘야함. 카테고리에는 공백문자가 포함될 수 있기 때문에, class값에 카테고리를 넣어서 isotope 플러그인으로 필터링 혹은 정렬을 하게 되면 공백문자가 들어간 것은 2개의 클래스로 인식하기 때문에 공백문자를 제거해줘야 한다. php에선 str_replace를, js에선 String.replace를 사용하였다.

Javascript, jQuery .each가 동작하는 각 엘리먼트에 delay 주기 setTimeout을 사용한다. var delay = function() {동작} setTimeout(delay, timems); 이 때 timems가 같으면 결국 쓰나 안쓰나 똑같다. 따라서 .each(function(i) { var delay ... setTimeout(delay, timems * i);} 와 같이 i를 이용해 시간을 눌려주는 방법을 생각해볼 수 있다.

CSSkeyframes을 이용한 animation을 사용했을 때, 부모컨테이너가 display: none 상태였다가 다시 보여지게되면 애니메이션이 처음부터 작동한다.

ajax로 엘리먼트를 append 한 후 이벤트리스너를 등록할 때에는$('body').on('event', 'selector', function() { }); 을 사용한다. youtube api 사용 // API를 로드한다.var tag = document.createElement('script');tag.src = "https://www.youtube.com/player_api";var firstScriptTag = document.getElementsByTagName('script')[0];firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // API로드시 콜백함수 function onYouTubePlayerAPIReady() { } // 선..