페이드 인/아웃 슬라이드쇼 (와이드 배경 이미지 변경) 플러그인
- 창 크기에 따라 이미지를 세로 중앙 중심으로 스케일링한다.
- 슬라이드 이미지들의 로드가 끝난 후에 이미지를 노출한다.
- 브라우저 크기가 변경될 때마다 그에 맞춰 조절된다.
사용법
<head>와 </head> 사이에 아래 코드를 추가한다.
<script type="text/javascript" src=" http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="./js/jquery.FadeWideBgImg.js"></script>
<script type="text/javascript">
(function($){
jQuery(document).ready(function(){
$('.slideshow').FadeWideBgImg({interval:2000});
});
}(window.jQuery,window));
</script>
위 코드 중에 $('.slideshow').FadeWideBgImg({interval:2000}); 을 원하는 옵션과 선택자를 넣어 자신이 원하는 스타일로 바꾼다.
- 옵션
- minwidth : 슬라이드 최소 넓이, 숫자 입력 (기본값 1020)
- height : 슬라이드 높이, 숫자 입력 (기본값 320)
- speed : 투명해지는 속도, 숫자 입력, 1000 = 1초 (기본값 1000)
- interval : 전환 간격, 숫자 입력, 1000 = 1초 (기본값 3000)
- cover : 반투명 커버 사용 여부, true/false (기본값 true)
그런 후에 슬라이드 시킬 이미지들을 <body>와 </body>사이에 아래 코드처럼 만들고 <li>을 추가하여 이미지를 넣어 나열시켜 놓는다.
<div style="width:100%;">
<ul class="slideshow">
<li><img src="./img/img001.jpg" alt="슬라이드 이미지"/></li>
<li><img src="./img/img002.jpg" alt="슬라이드 이미지"/></li>
<li><img src="./img/img003.jpg" alt="슬라이드 이미지"/></li>
</ul>
</div>