Cycle js fx 옵션


캡션 2 플러그인.
이 페이지에 표시된 효과를 사용하려면 Cycle2의 캡션 2 플러그인이 포함되어야합니다. 캡션 2 플러그인에 대한 링크는 다운로드 페이지를 참조하십시오.
애니메이션 캡션 및 오버레이.
caption2 플러그인은 Cycle2에서 제공하는 기본 캡션 플러그인을 보완하며 슬라이드 쇼 캡션 및 / 또는 오버레이에 애니메이션을 적용 할 수있는 기능을 제공합니다. 슬라이드 쇼 요소에서 플러그인을 이름으로 선언하면이 기능을 사용할 수 있습니다.
기본값.
caption2 플러그인의 기본 옵션은 캡션과 오버레이 모두 페이드 인 / 아웃하는 것입니다.
페이드 오버레이 콘텐츠 (오버레이 컨테이너 아님)
이 예는 위의 예를 수정하여 전체 오버레이 컨테이너가 아닌 오버레이 내용을 페이드 아웃하는 방법을 보여줍니다. 이 작업은 data-cycle-overlay-fx-sel 옵션을 사용하여 애니메이션 요소를 대상으로 수행됩니다.
슬라이드 위 / 아래 자막.
슬라이드 위 / 아래 오버레이.
Caption2 옵션.
옵션은 data-cycle-option-name 속성을 사용하여 slideshow 요소에 설정됩니다. 옵션 속성 이름은 항상 소문자이며 데이터 사이클 앞에 접두어가 붙습니다. 예를 들어, caption-plugin 옵션을 설정하려면 data-cycle-caption-plugin 속성을 사용하십시오.

Cycle js fx 옵션
Cycle2 슬라이드 쇼는 클래스 이름 사이클 슬라이드 쇼를 슬라이드 쇼 컨테이너 요소에 추가하여 자동으로 초기화 할 수 있습니다.
Cycle2는이 클래스 이름을 포함하는 모든 요소에 대해 자동으로 슬라이드 쇼를 찾고 초기화합니다. 이 동작을 원하지 않으면 슬라이드 쇼에 사이클 슬라이드 쇼 클래스를 추가하지 말고 슬라이드 쇼 컨테이너 요소에서주기 메서드를 호출하여 프로그래밍 방식으로 슬라이드 쇼를 초기화하십시오.
jQuery의 준비 이벤트가 발생한 후에 DOM에 추가 된 슬라이드 쇼에는 자동 초기화가 지원되지 않습니다. 이 경우 위와 같이주기 메서드를 호출하여 슬라이드 쇼를 프로그래밍 방식으로 초기화해야합니다. 셀렉터를 두 번 이상 실행하면 Cycle2가 실행중인 슬라이드 쇼를 다시 초기화하지 않으므로 업데이트 된 DOM 부분으로 선택기를 한정 할 필요가 없습니다. 따라서 이미 실행중인 슬라이드 쇼에 대해 걱정할 필요없이 여러 번 위에 코드를 실행하는 것이 안전합니다.
옵션은 data-cycle-option-name 속성을 사용하여 slideshow 요소에 설정됩니다. 옵션 이름은 항상 소문자이며 데이터 사이클 앞에 접두어가 붙습니다. 예를 들어, 속도 및 수동 속도 옵션을 설정하려면 다음을 수행합니다.
슬라이드 쇼 옵션을 설정하는 기본 방법은 사용자 지정 초기화 스크립트의 필요성을 크게 줄이거 나 없애는 것입니다.
옵션을주기 방법에 옵션 해시를 전달하여 원하는 경우 프로그래밍 방식으로 옵션을 설정할 수도 있습니다. 프로그래밍 방식으로 옵션을 설정할 때 옵션 이름에는 데이터 사이클 접두어가없고 문자열은 하이픈에 붙은 경우입니다.
모든 옵션은 컨테이너 요소의 data-cycle - * 속성을 사용하여 선언 할 수 있으며 모든 슬라이드에 상속됩니다.
아래 표의 옵션에는 & bull; 심볼은 특정 슬라이드에 대한 특정 속성을 갖기 위해 개별 슬라이드 요소에서 재정의 될 수 있습니다.
기본적으로 슬라이드 쇼는 마지막 슬라이드에서 첫 번째 슬라이드로 원활하게 진행됩니다.
예를 들어 600x400 인 이미지 집합을 유지하기 위해 슬라이드 쇼 컨테이너를 특정 종횡비로 강제 설정하려면 다음과 같은 비율 문자열을 사용하십시오.
높이 관리를 사용하지 않으려면이 옵션 값을 -1 또는 false로 설정하십시오.
(프로그래밍 방식으로 만 사용)
Cycle2는 기본적으로 간단한 Mustache 스타일 템플릿을 사용합니다.
(프로그램 사용에만 해당)
Cycle2는 기본적으로 간단한 Mustache 스타일 템플릿을 사용합니다.
기본 호출기 링크는 단순히 글 머리 기호입니다.
Cycle2는 기본적으로 간단한 Mustache 스타일 템플릿을 사용합니다.
기본적으로 Cycle2는 슬라이드 쇼 컨테이너의 바로 위 자식 인 모든 이미지 요소를 찾습니다.
값이 -1이면 updateView는 슬라이드 전환 직후에만 호출됩니다.
값이 0의 경우, 슬라이드 천이 중에 updateView가 불려갑니다.
값이 1이면 updateView는 슬라이드 전환 시작시 즉시 호출되고 전환 직후 다시 호출됩니다.
컨테이너 요소에서 cycle을 호출하고 명령 이름 인 문자열 인수를 전달하여 명령을 슬라이드 쇼에 실행합니다.
선언적 명령.
data-cycle-cmd 속성을 사용하여 명령을 선언적으로 실행할 수 있습니다. 모든 요소에서이 속성을 사용할 수 있으며 Cycle2는 요소 위임을 사용하여 요소를 클릭 할 때주기 명령을 실행합니다. 예를 들어 임의의 버튼 요소로 슬라이드 쇼를 일시 중지하려면 다음을 수행하십시오.
위의 버튼을 클릭하면 Cycle2가 자동으로 생성하고이 코드를 실행합니다.
특정 슬라이드 쇼를 명령 대상으로 지정하려면 data-cycle-context 속성을 사용하고 해당 값을 원하는 슬라이드 쇼를 식별하는 선택자 문자열로 설정하십시오.
위의 버튼을 클릭하면 Cycle2가 자동으로 생성하고이 코드를 실행합니다.
마지막으로 data-cycle-arg 속성을 사용하여 cycle 명령에 인수를 전달할 수 있습니다. 예를 들어, 슬라이드 쇼의 첫 번째 슬라이드를 제거하려면 :
Cycle2는 슬라이드 쇼가 실행될 때 수많은 이벤트를 내보내고 이러한 이벤트에 바인딩하여 슬라이드 쇼의 동작을 추가로 사용자 정의하거나 보강 할 수 있습니다.
모든 사이클 이벤트는 슬라이드 쇼 요소에서 트리거되므로 다음과 같은 코드를 사용하여 바인딩 할 수 있습니다.
기타 비트.
Cycle2 옵션 해시에는 위에 설명 된 모든 슬라이드 쇼 옵션과 다음과 같은 추가 런타임 상태가 포함되어 있습니다.
상태 데이터는 읽기 전용입니다.
일시 중지 된 상태 테스트.
Cycle2는 슬라이드 쇼가 일시 중지되었을 때 슬라이드 쇼 컨테이너에 사이클 일시 중지 된 클래스를 지정합니다. 스크립트는 다음과 같은 코드를 사용하여 슬라이드 쇼가 현재 일시 중지되었는지 확인할 수 있습니다.
슬라이드 쇼의 각 슬라이드는 data-cycle-hash라는 속성을 가질 수 있습니다. 이 속성에 값을 할당하면 현재 페이지의 위치 해시가 업데이트되어 슬라이드가 활성화되었을 때 그 값을 반영합니다. 마찬가지로 위치 해시가 슬라이드 중 하나의 데이터 사이클 해시와 동일한 경우 페이지가로드되면 해당 슬라이드가 활성 상태가됩니다. 자세한 내용은 북 마크 가능한 데모를 참조하십시오.

& lsaquo; & lsaquo; cycle homejQuery Cycle Plugin - 중급 데모 (Part 1)
Cycle Plugin을 다운로드하십시오.
첫 번째 슬라이드 지연.
지연 옵션을 사용하면 첫 번째 슬라이드의 제한 시간 값에 추가 할 시간 (밀리 초)을 설정할 수 있습니다. 이 설정은 전환을 오프셋하여 CPU와 경쟁 할 수 없도록하는 방법을 제공하므로 동일한 페이지에 여러 슬라이드 쇼가있는 경우 유용합니다. 이 데모 페이지에는 수많은 슬라이드 쇼가 포함되어 있으므로이 페이지에서 지연이 자주 사용됩니다.
Cycle Plugin은 Easing Plugin이 페이지에 포함되어있는 경우 전환 애니메이션 중에 여유를 지원합니다.
sync 옵션은 슬라이드 전환이 동시에 발생하는지 여부를 제어합니다. 기본값은 true입니다. 즉, 다음 슬라이드가 전환 될 때 현재 슬라이드가 전환됩니다. sync 옵션을 false로 설정하면 전환에 대한 흥미로운 트위스트를 얻을 수 있습니다.
셔플 효과는 아래 그림 (왼쪽)과 같이 상자에서 작동합니다. 그러나이 효과를 더 많이 제어해야하는 경우에는 셔플 좌표를 지정하는 옵션 개체에 shuffle 속성을 정의 할 수 있습니다. 이 좌표는 슬라이드가 임의로 이동할 위치를 나타냅니다. 기본값은입니다.
마음 속에 간직 할 물건들.
- 요소의 너비 또는 높이를 조작하는 효과 (slideX / slidesY / turnLeft / turnRight / turnUp / turnDown)는 IE에서 "backin"여유와 함께 작동하지 않습니다. 이 옵션의 조합은 피하십시오.

& lsaquo; & lsaquo; cycle homejQuery Cycle Plugin - 중급 데모 (2 부)
Cycle Plugin을 다운로드하십시오.
전환 - 이전 및 다음을 클릭하십시오.
타이머에서 전환이 발생하는 대신 전환 이벤트가 클릭 이벤트에 대한 응답으로 발생하도록 선택할 수 있습니다. 이전 및 다음 옵션은 이전 / 다음 전환에 대한 트리거가되어야하는 요소를 식별하는 데 사용됩니다. 시간 초과 = 0과 함께 사용하면 효과는 수동 슬라이드 쇼입니다. prev와 next의 값은 DOM 요소이거나 유효한 jQuery 선택 문자열 일 수 있습니다.
자세히 전환 - 시간 초과 및 호출기를 클릭하십시오.
호출기 옵션은 전체 탐색 컨트롤을 만드는 데 사용됩니다. 이 옵션은 플러그인에 슬라이드마다 하나씩 탐색 요소를 작성하고 호출기 옵션의 값으로 식별되는 컨테이너에 추가합니다.
수동 및 자동 진행.
호출기 옵션을 사용할 때 생성 된 탐색 요소는 단순히 앵커입니다. 그래서 호출기 옵션을 다음과 같이 설정하면 :
다음과 같이 앵커 스타일을 지정할 수 있습니다.
또한 활성 슬라이드의 탐색 요소에는 고유 한 스타일을 지정할 수 있도록 activeSlide 클래스가 제공됩니다.
위의 예에서 호출기는 다음과 같이 스타일이 지정되어 있습니다.
슬라이드 쇼 중지하기.
실행중인 슬라이드 쇼를 중지해야하는 경우 'stop'문자열을 순환 방법에 전달할 수 있습니다.
수동으로 슬라이드 쇼 일시 중지.
실행중인 슬라이드 쇼를 일시 중지 / 다시 시작해야하는 경우 '일시 중지'또는 '다시 시작'문자열을 순환 방법에 전달할 수 있습니다.
전후 전환은 콜백 전후에 지원됩니다. 콜백 메소드 컨텍스트 내에서 전환되는 요소입니다. before 옵션은 슬라이드 전환 직전에 호출 할 콜백 함수의 이름을 지정합니다. after 옵션은 슬라이드 전환이 끝날 때 호출 할 콜백 메소드의 이름을 지정합니다.
전후 콜백 메소드에는 세 개의 인수가 전달됩니다. 전환되는 슬라이드의 DOM 요소 (this와 동일) options 객체에서 전환되는 슬라이드의 DOM 요소입니다.
비 이미지 콘텐츠.
지금까지 예제들은 모두 이미지 내용을 사용했습니다. 이것은 단순성을 위해 그리고 이미지 데모 때문에 매우 잘 수행되었습니다. 그러나 슬라이드 내용에는 제한이 없습니다. 슬라이드에 원하는 내용을 포함 할 수 있습니다.
세인트 앤드류 스 주립 공원 - 파나마 시티, 플로리다.
이 공원은 플로리다에서 가장 유명한 야외 레크레이션 장소 중 하나입니다.
플로리다 산 골짜기에 위치한 1,260 에이커의 공원은 경치가 좋은 반도에 위치하고 있으며 설탕 흰 모래와 화려한 푸른 물로 잘 알려져 있습니다.
바다는 끝없는 재미를위한 기회를 제공합니다. 부기 탑승에서 스노클링, 수영, 보트 타기에 이르기까지 항상 할 일이 있습니다.

Comments