CLOSE SEARCH

jQuery + InnerFade를 이용한 갤러리 구현

jQuery 플러그인 중 하나인 InnerFade 플러그인을 사용하면 Fade나 Slide 방식의 이미지(또는 문자열) 전환을 쉽게 구현할 수 있습니다.

우선 InnerFade 플러그인은 아래의 주소에서 다운로드 할 수 있습니다.

http://medienfreunde.com/lab/innerfade/

InnerFade 플러그인은 <div>나 <ul> 태그 내에 있는 항목들을 전환해 주는 기능을 하며, 슬라이드 쇼, 갤러리, 광고 등에 응용할 수 있습니다.

 

가장 먼저 <head> 태그 사이에 jQuery와 InnerFade 구현파일을 추가해줍니다. Code1에서는 MS CDN에서 제공하는 jQuery 파일을 사용하고 있습니다.

Code2 에서는 문서에서 사용할 CSS를 정의합니다. 간단히 이미지의 크기만을 정의하고 있습니다.

Code3 에서는 innerfade 함수를 통해 실제 이미지 전환효과를 구현합니다. innerfade 함수는 속성을 정의하는 자바스크립트 객체를 파라미터로 받습니다. animationtype에는 fade 또는 slide를 지정할 수 있습니다. speed는 전환 속도를 지정하는 속성이며, ms 단위의 값을 직접 사용하거나, slow, normal, fast와 같은 키워드를 사용할 수도 있습니다. timeout 값은 전환과 전환 사이의 시간을 나타냅니다. Code3처럼 2000을 사용한 경우에는 그림이 바뀐 후 2초 뒤에 새로운 그림으로 바뀌게 됩니다. type는 항목의 나열 순서를 지정하는 속성이고, sequence, random, random_start 키워드를 사용할 수 있습니다. containerheight는 요소를 담고 있는 컨테이너의 높이를 나타내는데 auto 키워드를 사용해서 높이를 자동으로 인식하도록 할 수도 있습니다.

Code4 에서는 <ul> 태그를 통해 전환에 사용할 이미지 목록을 나열하고 있습니다. ul 태그의 id는 jQuery가 innerfade를 적용할 요소를 인식하는데 사용되고 있습니다. (Code3 라인 3)

웹브라우저를 통해 확인해보면, 모든 그림이 동시에 표시되지 않고 정해진 시간마다 하나씩 전환되는 것을 볼 수 있습니다. 만약 사용자가 웹페이지에서 스크립트나 ActiveX가 실행되는 것을 허용하지 않는 경우에는 innerFade 플러그인이 적용되지 않고, 기본 <ul> 태그의 기능대로 모든 이미지가 전환없이 정적으로 출력됩니다.

Fade Sample Page

 

Filed under: Web