Fotorama 사용방법 및 기능 제어

Fotorama 플러그인은 누구나 손쉽게 사용할 수 있는

이미지 롤링 플러그인 이다.

특히 모바일 롤링 대응이 아주 잘 되어있다.

http://www.fotorama.io/

위 링크로 들어가면

Fotorama의 사용 방법그리고 옵션등을 확인 할 수 있다.

사용방법은 아래와 같이 소스를 구성한다.

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 
<!-- fotorama.css & fotorama.js. -->
<link  href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script> <!-- 16 KB -->
 
<div class="fotorama">
  <img src="http://s.fotorama.io/1.jpg">
  <img src="http://s.fotorama.io/2.jpg">
</div>

주로 내가 사용하는 옵션이다.

그리고 아래와 같은 경우는 이미지에 링크를 걸고 싶을떄 사용할 수 있는 방법이다.

적극 추천한다.

<!-- 배너 -->
<article class="main_bannerpop_rolling mgb10">
    <div class="fotorama" data-autoplay="true" data-width="100%" data-arrows="flase">
        <!-- data-nav="flase" -->
        <div data-img="../images/banner/banner_img01.jpg"><a href="http://m.koita.or.kr/m/mobile/sns/sns_submain.aspx"></a></div>
        <div data-img="../images/banner/banner_img02.jpg"><a href="http://m.koita.or.kr/m/mobile/sns/sns_submain.aspx"></a></div>
        <div data-img="../images/banner/banner_img03.jpg"><a href="http://m.koita.or.kr/m/mobile/sns/sns_submain.aspx"></a></div>
    </div>
</article>
<!-- //배너 -->
 
<style type="text/css">
    .fotorama__html{position:relative !important;}
    .fotorama__html div{height:100%;}
    .fotorama__html a{z-index:1; display:block; height:100%;}
</style>
 
<script type="text/javascript">
    $(document).ready(function(e) {
            $(".fotorama").on("click",function(){
                     
                var href = $(this).find("a").attr('href');
                location.href=href;
                     
            });
    });
</script>

여기서 주의할점은 클릭과 동시에 이미지 이동이 일어나는데

그 효과를 방지하기 위해선 아래와 같이 설정해주면 된다.

<div class='fotorama' data-click='false' data-swipe='false'>