'슬라이더'에 해당되는 글 3건

<스크린 디자인>


먼저 적당한 크기의 스크린을 만듭니다. 여기에서는 iPhone6/6s 사이즈에 맞추겠습니다.


라이브러리에서 IOS9에 있는 슬라이더를 가져옵니다. 가져온 후 슬라이더의 이름을 “Slider text”로 수정합니다. 이름은 한 눈에 알아보기 쉽게 짓는 편이 좋습니다. 그리고 두께 등을 수정해봅니다.


라이브러리 BASIC에 있는 텍스트를 넣어봅니다. 그리고 이름을 “Text by slider”로 기본 글자도 이와 같게 “Text by slider”로 고쳐봅니다.


<기본 인터랙션 추가>


먼저 사용자에 의한 동작(Trigger)이 발생하는 곳인 슬라이더에 인터랙션을 부여합니다.
Slider text를 클릭하고, 인터랙션 탭을 선택한 후 “+ ADD INTERACTIONS”를 클릭합니다.


제목은 “change text”로 하고, 트리거는 “Slider drag”를 선택합니다.


이제 트리거에 의해 발생할 액션을 추가합니다.
슬라이더 인디케이터의 위치가 변하면 내부적으로 0~100까지의 값이 변화합니다. 이 값이 텍스트로 보내져야하기 때문에 값을 저장할 공간이 필요한데 그 저장 공간이 바로 “Variables(변수)”입니다. 즉 여기에서는 트리거에 의해 변수가 생성(세팅)되야 하기 때문에 “Set Variables”를 선택해야 합니다.


Variables 항목을 클릭하여 “New variables”를 통해 새로운 변수명을 “sliderposition” (만일 빈칸을 띄운다면 “slider_position” - 이유 : 변수명이나 함수명에는 공백이 들어갈 수 없습니다)으로 설정하고, Variables type(변수형)를 “Numeric(숫자형)”으로 선택합니다.


Value type(값의 형태)는 “Callback value from event”를 선택하는데 이 뜻은 “이벤트로 발생한 값을 되돌려 받은 것“이라고 생각하면 됩니다. 여기서는 트리거로 인해 발생한 인디케이터의 위치 값이라고 할 수 있습니다.
Callback value(되돌려 받은 값의 양)은 “%”를 선택하게 자동으로 정해져 있습니다.



<콜백 인터랙션 추가>


Callback”은 액션이 발생한 후 새롭게 발생하는 것을 말하며 이것은 값(변수)이 될 수도 있고 또다른 행동(액션)이 될 수도 있습니다.
여기서는 슬라이더의 인디케이터 위치가 변하고 그에 설정된 값이 변수 “sliderposition”에 “숫자형”, “%”값으로 저장된 후에 (순차적으로) 발생하는 또 다른 인터랙션이라 생각하면 됩니다.


인터랙션 설정창 하단의 “Callback”의 체크를 활성화합니다. 그리고 Action 항목 중에서 “Change property”를 선택합니다.



현재 스크린에 있는 아이템 속성이 변할 것이므로 스크린 항목은 그대로 두고, Item은 “Text by slider”를 선택하고 Property는 “Text”를 선택합니다.


이제 불러올 값을 지정하기 위해 Variable type에서 “Read from variable”을 선택하여 특정 변수에서 값을 가져올 수 있게 설정한 후 Variable name에서 “slidterposition”변수를 특정하여 가져옵니다.


설정이 끝났으니 “SAVE INTERACTION”을 클릭하여 인터랙션을 저장합니다. 저장과 동시에 인터랙션의 구조가 트리형식으로 나타나는 것을 확인할 수 있습니다.


저장한 후 미리보기를 통해 동작을 확인해봅니다. 인디케이터 위치가 변할 때마다 텍스트의 값이 0~100까지 변하는 것을 볼 수 있습니다.





블로그 이미지

환타73

디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.

,


<Image URL - http://wpsmackdown.com/>

우연히 발견한 것이라 정확한 것은 아닙니다만 자식테마를 사용해서 테마를 커스터마이징하고 포스팅을 하는 경우에 페이지, 포스트의 본문에 삽입되는 "이미지 슬라이더"가 동작하지 않는 것을 알게 되었습니다.

주로 사용하는 Plugin인 "Meta Slider"도 동작을 하지 않았고, "Shortcode Ultimate"에서 제공하는 슬라이더도 동작을 하지 않고 등록된 이미지와 제목만 쭈욱 나열되는 현상이 있었습니다. 그런테 설정 창에서의 미리보기는 잘 되었습니다.

쇼트코드를 넣었다가 뺐다가 하면서 몇시간을 구글과 씨름을 했지만 원인을 못 찾았는데, 혹시나 싶어서 자식테마에 있던 "single.php"를 삭제하니 제대로 동작을 하더군요...이런;;;

(인터넷을 좀 더 찾아보니까 이런 문제 때문인지 워드프레스 사용자 사이에서 자식테마의 사용 여부에 대해서 말이 좀 있었습니다.)

그래서 앞으로는 테마를 그냥 통채로 복사해서 테마명 뒤에 -custom 이라고 추가만 하고 셋팅해서 작업을 할 생각입니다. 이번의 슬라이더 문제 말고도 다른 문제들이 곳곳에 숨어있을 것 같아서요. 커스텀포스트 타잎 이라던가 텍소노미 출력 부분에서도 왠지 문제가 생길 것 같은 예감이...



블로그 이미지

환타73

디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.

,

Meta Slider

http://wordpress.org/plugins/ml-slider/

 

메타슬라이더. 무료버전이지만 내부에 4가지 종류의 슬라이더를 제공하고 있습니다.

4개 중에서 개인적으로는 Nivo Slider 를 주로 사용하는데 가로, 세로 풀사이즈를 잘 지원해서라고나 할까요?




블로그 이미지

환타73

디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.

,