jQuery jCarousel 스크립트

• 할 수있다 17, 2024

jQuery를 사용하면 웹 사이트에 이미지를 쉽게 추가 할 수 있습니다. MIT 및 / 또는 GPL 라이센스에 따라 릴리스 된 많은 jQuery 스크립트가 있습니다. 이들 중 대부분은 웹 사이트에서 사용하거나 클라이언트 사이트에 설치하는 데 프로그래밍 지식이 필요없는 플러그 앤 플레이 (플러그인) 스크립트입니다. 디자인 서비스에 jQuery 스크립트를 추가하는 것이 좋습니다.

Jan Sorgalla의 jQuery 스크립트 중 하나는 jCarousel입니다. 이 플러그인에는 그래픽과 텍스트에 대한 많은 응용 프로그램이있을 수 있습니다. 스크립트의 주요 기능은 컨텐츠를 가로 또는 세로로 스크롤하는 것입니다. 컨텐츠는 Ajax, JavaScript, PHP 또는 Flickr를 통해 정적이거나 동적으로로드 될 수 있습니다. 물론이 두 번째 옵션은 이러한 언어에 익숙해야합니다. jCarousel은 또한 Thickbox 3과 함께 작동하여 슬라이드 쇼에서 썸네일 이미지를 클릭 할 때 큰 크기의 이미지가 Thickbox로 열립니다.

스크립트에 대한 대부분의 코드는 웹 페이지의 헤드 섹션에서 참조됩니다. jQuery 라이브러리와 jCarousel 소스 코드 및 스타일 시트 파일이 필요합니다. 이 플러그인의 장점은 CSS에 의해 "스킨"되어 많은 모양을 가질 수 있다는 것입니다. 스크립트가 스크롤 할 내용은 기본 UL 목록으로 웹 페이지 본문에 배치됩니다.

사용자 정의 애니메이션 추가 및 여유를 포함하여 스크립트를 구성하기위한 여러 옵션이 있습니다. 자동 스크롤 또는 탐색 버튼으로 작동 할 수 있습니다. 또 다른 좋은 기능은 슬라이드 쇼의 너비가 브라우저 창에 맞게 자동으로 조정된다는 것입니다. 브라우저 크기에 따라 더 많거나 적은 이미지를 표시하도록 구성하거나 필요에 따라 이미지 사이에 유연한 간격을두고 설정된 수의 이미지를 갖도록 구성 할 수 있습니다. 한 페이지에 둘 이상의 회전식 슬라이드 쇼가 있고 각각에 다른 스킨을 제공 할 수 있습니다.

Flickr 사진 스트림 및 Flickr API와의 통합은 대부분의 스크립트에서 볼 수없는 멋진 기능입니다. 악명 높은 Internet Explorer 6을 포함한 여러 브라우저에서 작동하도록 테스트되었습니다.

Photoshop에서 만들 수있는 간단한 gif 애니메이션 대신 이것을 사용하는 이유를 스스로에게 물어볼 수도 있습니다. 주요 이유는 회전식 슬라이드 쇼가 설치되면 업데이트하기가 쉽기 때문입니다. 다른 이미지 세트를 표시해야 할 때마다 새 gif를 만드는 것보다 UL 목록의 내용을 전환하는 것이 더 쉽습니다.

//sorgalla.com/projects/jcarousel/

비디오 지침: jQuery 캐러셀(Carousel) 컴포넌트 제작 (할 수있다 2024).