jQuery(document).ready( function() {
	
	var $grid = jQuery('.grid').isotope({
    itemSelector: '.grid-item',
    layoutMode: 'fitRows',
		stagger: 30,
		transitionDuration: 1000,
    getSortData: {
     title: '.title',
     client: '.client'
    }
  })
	
					   
  jQuery('.category').each( function() {
	    
    jQuery(this).closest('.grid-item').addClass(jQuery(this).text().toLowerCase());
    jQuery(this).remove();

	  })
  
  jQuery('[data-filter]').click( function(e) {
    
    e.preventDefault();
    
    $grid.isotope({ filter: jQuery(this).data('filter') })
    
  
	  
   
})
})
gsap.registerPlugin(ScrollTrigger);

gsap.to("#logoanim2", {
    duration: 2.5,
    ease: "bounce.out",
    rotate: 360,
    x: 450,
    scrollTrigger: {
        trigger: "#logoanim2",
        start: "bottom bottom",
        end: "bottom top",
    }
});

Code Block 을 이용해서 Javascript 섹션에 gsap.registerPlugin(ScrollTrigger); 한 줄을 입력해야 함.

https://codepen.io/vulchivijay/pen/yyxyvB

아래 코드를 Code Snippet > Add New 로 하여 <?php 바로 아래 줄에 삽입합니다.

if( function_exists('oxygen_vsb_register_condition') ) {

global $oxy_condition_operators;

oxygen_vsb_register_condition('Has Results', array('options'=>array('true', 'false'), 'custom'=>false), array('=='), 'search_has_results_callback', 'Search');

function search_has_results_callback($value, $operator) {

global $wp_query;
$posts_found = $wp_query->found_posts;

if( $value == "true" && $posts_found > 0) {
  return true;
} else if( $value == "false" && $posts_found == 0 ) {
  return true;
}

}

}

상기 코드를 생성하면, Condition에서 Search Result Condition을 적용할 수 있게 됨.

아래의 코드를 스크롤을 해야하는 Modal 요소의 Javascript 섹션에 붙여넣기 합니다.

/*jQuery Watch Plugin
@author Darcy Clarke
@version 2.0
Copyright (c) 2012 Darcy Clarke
Dual licensed under the MIT and GPL licenses.*/
(function(e){e.fn.watch=function(t,n,r){var i=document.createElement("div");var s=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver;var o=window.CustomEvent||function(){return arguments||{}};var u=function(e,t){e="on"+e;var n=e in t;if(!n){t.setAttribute(e,"return;");n=typeof t[e]=="function"}return n};if(typeof n=="function"){r=n;n={}}if(typeof r!="function")r=function(){};n=e.extend({},{throttle:10},n);var a=function(t){var n=this;e.each(this.watching,function(){var e=this;var r=false;var i;for(var s=0;s<e.props.length;s++){i=t[0].attributes[e.props[s]]||t.css(e.props[s]);if(e.vals[s]!=i){e.vals[s]=i;r=true;break}}if(r&&e.callback)e.callback.call(n,new o("AttrChange"))})};return this.each(function(){var o=this;var f=e(this);var l={props:t.split(" "),vals:[],changed:[],callback:r};e.each(l.props,function(e){l.vals[e]=f[0].attributes[l.props[e]]||f.css(l.props[e]);l.changed[e]=false});if(!this.watching)this.watching=[];this.watching.push(l);if(s){var c=new s(function(e){e.forEach(function(e){r.call(o,e)})});c.observe(this,{subtree:false,attributes:true})}else if(u("DOMAttrModified",i)){f.on("DOMAttrModified",r)}else if(u("propertychange",i)){f.on("propertychange",r)}else{setInterval(function(){a.call(o,f)},n.throttle)}})}})(jQuery);

jQuery(document).ready(function($){$('.oxygen-builder-body .oxy-modal-backdrop').css('height','auto');if($('html').attr('ng-app')=='CTFrontendBuilder') return;function scrollbarWidth(){var block = $('<div>').css({'height':'50px','width':'50px'}),indicator=$('<div>').css({'height':'200px'});$('body').append(block.append(indicator));var w1=$('div',block).innerWidth();block.css('overflow-y','scroll');var w2=$('div',block).innerWidth();$(block).remove();return (w1 - w2);}var bg=$('#%%ELEMENT_ID%%').parent('.oxy-modal-backdrop'),backsize=$(bg).height();function fixflex(){var backpos=$(bg).css('align-items'),screenh=$(window).height(),barh=$('#wpadminbar').height();$(bg).css({'height':'calc(100% - '+barh+'px)','top':+barh+'px'});if(backsize>screenh){if($(bg).hasClass('right')){$(bg).css('align-items','flex-end');$(bg).css('justify-content','flex-start');}else if($(bg).hasClass('left')){$(bg).css('justify-content','flex-start');}else{$(bg).css('align-items','flex-start');}}else{if($(bg).hasClass('right')){$(bg).css('justify-content','center');}else if($(bg).hasClass('left')){$(bg).css('justify-content','center');}else{$(bg).css('align-items',backpos);}}}$(window).resize(function(event){fixflex();});fixflex();if(typeof $().watch=='function'){$(bg).watch('display',function(){if($(this).css('display')=='flex'){$('body').css({'overflow-y':'hidden','height':'100%','position':'relative','margin-right':scrollbarWidth()+'px'});$(this).css('overflow-y','auto');$('.oxy-sticky-header-active').css('padding-right',scrollbarWidth()+'px');if($('#%%ELEMENT_ID%%[data-aos*="left"]')){$(bg).css('overflow-x','hidden');}}else if($(this).css('display')=='none'){$('.oxy-modal-backdrop').removeClass("live");setTimeout(function(){$('body').css({'overflow-y':'auto','margin-right':'0'});$('.oxy-sticky-header-active').css('padding-right','0');},300);}});}});
  1. Repeater 생성 및 .grid 부여
  2. Repeater > Div 생성 및 .grid-item 부여
  3. Repeater > Div > (Sorting Target Element) 에 원하는 class 지정
  4. Repeater > Div > Code Block 생성 및 PHP 코드 입력

[PHP]

<?php
	$categories = get_the_category(get_the_ID());

	foreach( $categories as $category ) {
     
      echo "<span class='category'>$category->slug</span>";

  }
?>

위 코드를 실행하면 Code Block의 텍스트가 각각의 Category Slug로 표시되는 것을 확인할 수 있습니다.

5. 페이지 맨 상위에 Code Block 생성 및 Javascript 코드 입력

jQuery(document).ready( function() {
  
  var $grid = jQuery('.grid').isotope({
    itemSelector: '.grid-item',
    layoutMode: 'fitRows',
    getSortData: {
     title: '.title',
     date: '.date'
    }
  })
  
  jQuery('.category').each( function() {
    
    jQuery(this).closest('.grid-item').addClass(jQuery(this).text().toLowerCase());
    jQuery(this).remove();
    
  })
  
  jQuery('[data-filter]').click( function(e) {
    
    e.preventDefault();
    
    $grid.isotope({ filter: jQuery(this).data('filter') })
    
  })
  
  jQuery('[data-sortby]').click( function(e) {
    
    e.preventDefault();
    
    $grid.isotope({ sortBy: jQuery(this).data('sortby') })
    
  })
  
})

6. 또, PHP 코드란에 아래의 스크립트를 입력

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

7. 버튼을 생성하고 각각의 클래스에 대한 Attribute 속성을 다음과 같이 변경

8. 버튼을 생성하고 정렬순에 대해서 정의하고자 할 때는 Attribute 의 속성을 name > data-sortby 한 다음 위 3번에서 지정한 .classname을 value값으로 지정함.

9. Isotope 의 Layout Modes에 대해사는 아래 링크를 참고할 것

https://isotope.metafizzy.co/layout-modes.html

jQuery : 버튼요소에 적용

Back-to-Top 기능을 적용할 버튼의 Advanced 메뉴의 Javascript 항목에 아래의 코드를 적용합니다.
jQuery('#%%ELEMENT_ID%%').off('click');
jQuery('#%%ELEMENT_ID%%').click(function() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
});

CSS : html에 적용

Manage에서 CSS stylessheets를 새로 생성하거나 기존의 스타일시트 중 하나를 선택하여 아래의 CSS를 적용합니다.
html {
scroll-behavior: smooth;
}

기능을 연결할 요소(예를 들면 button)를 선택하고 Advanced Option의 Javascript 값에 아래의 코드를 입력해 줍니다.

jQuery('#%%ELEMENT_ID%%').off('click');
jQuery('#%%ELEMENT_ID%%').click(function() {
window.print();
});

해당 버튼의 URL 값은 #을 입력해 주도록 합니다.

구성

DIV 내에 code block, search form, icon 으로 구성

CSS 분석

/* 검색엘리먼트의 submit 타입에 대한 아이디를 확인한 후 display를 none으로 설정 */
#searchsubmit {
display: none;
}

/* 검색엘리먼트의 입력창의 아이디를 확인한 후 스타일 적용 */
#s {
background-color: rgba(0,0,0,0.1);
opacity: 0;
width: 0px;
postion: absolute;
top: 0;
left: 0;
transition: 0.3s all ease-in-out;
}

/* 검색아이콘의 아이디를 확인한 후 마우스 ON시 손가락 모양으로 스타일 적용 */
#fancy_icon_dk {
cursor: pointer;
}

/* 검색엘리먼트 입력창(position:absolute)의 parent wrap의 layout-position 속성을 relative로 설정한 후 마우스 hover시 s와 s:focus의 스타일 적용 */
#div_block-418-26:hover #s, #s:focus {
width: 200px;
opacity: 1;
left: -208px;
}

Javascript 분석

/* 검색아이콘을 클릭했을 때 검색기능이 수행되도록 설정 */
jQuery('#fancy_icon_dk').on('click', function() {

jQuery('#searchsubmit').click();

});

power-switchmagnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram