jquery 이미지 슬라이드 쇼 높이 자동조절

 

jquery 이미지 슬라이드 쇼 높이 자동조절방법

jquery를 이용하면 플래시를 이용하지 않고도

멋진 이미지 슬라이드쇼를 구현할 수가 있습니다. 

 

jquery 를 이용한 이미지 슬라이드쇼 구현방법이 궁금하다면 

아래 글을 참조하면 됩니다.

 

[관련글]

 

- jquery를 이용한 이미지 슬라이드쇼, 롤링

- 간단한 html 이미지 슬라이드

- 이미지 특정위치 투명도 조절, 이미지 위에 글자 넣기

 

 

 

 

이미지 슬라이드쇼 크기 및 사진높이 자동조절

 

이때 슬라이드쇼에 사용되는 이미지는 그 크기가 클 수도 있고

해상도가 큰 이미지를 작게 표시해야 하는 경우가 있습니다.

그런경우 간단하게 스타일을 이용하여 조정이 가능합니다.

 

이 글은 cycle2.js를 이용하여 슬라이드쇼를 구현시

이미지 높이나 폭을 자동으로 조절하는 방법에 대한 내용입니다.

 

 

cycle2.js 의 사용방법

 

cycle2.js query를 이용한 이미지 슬라이드쇼 구현을 위해서는

아래와 같이 cycle2.js만 추가하면 됩니다.

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>

 

 

프레임 크기 조절 방법

 

슬라이드 이미지를 한번에 크기를 줄이는 방법은 바로 스타일시트를 이용하는 것입니다.

다음과 같이 말이죠!

 

<style>

  .cycle-slideshow { width: 50% }
  .cycle-slideshow img { width: 100%; height: auto } 

</style> 

 

 

위 방법은 틀의 크기를 전체적으로 지정함으로써

모든 사진이 그 틀의 크기로 줄어들어 표시가 됩니다.

 

 

 

 

이미지 높이 자동조절방법

 

이미지 높이 자동조절은

옵션으로 추가하면 됩니다.

 

 

<div class="cycle-slideshow"
    data-cycle-fx="scrollHorz"
    data-cycle-pause-on-hover="true"
    data-cycle-speed="120"
    data-cycle-auto-height="3:2"

>
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/1.jpg">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/2.jpg">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/3.jpg">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/4.jpg">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/5.jpg">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/6.jpg">
</div>