jQuery 슬라이드 fotorama 플러그인에서 이미지에 링크걸기(페이지이동) | Tips

jQuery slide 플러그인중 제일 심플하고 괜찮다고 생각되는 플러그인이

fotorama 인데 이게 이미지에 링크를 걸어서 페이지 이동을 하려고 그냥 a 링크 거니깐 안된다.


그래서 급하게 해본 방법


보통 보면


<div class='fotorama' data-loop='true'>
<img src='경로' />
<img src='경로' />

</div>


위에처럼 기본적으로 사용할텐데 저렇게 했을때 그냥 이미지에 a 태그로 감싸서 링크를 걸면 작동을 안함.

방법은


<div class='fotorama'>
<div data-img='이미지경로'><a href='이동경로'></a></div>
<div data-img='이미지경로'><a href='이동경로'></a></div>

</div>

위처럼 한다음에


$(document).ready(function(e) {
    $(".fotorama").on("click",function(){
		
	var href = $(this).find("a").attr('href');
	location.href=href;
		
	});
});



위와같이 클릭을 했을때 이동시켜 주면 된다.


ps. 클릭하면 이미지 이동이 일어나고 페이지가 바뀌는데 그게 싫다면

아래와 같이 클릭효과랑 스와이프 효과에 false 를 주면 된다.

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

fotorama의 자세한 사용법은 http://www.fotorama.io 로 가서 확인할수 있다.

fotorama,slide
Comment Write
Comment List
등록된 코멘트가 없습니다.