본문으로 바로가기

FancyBox 에서 padding 및 margin 없에기

category ETC Tips 2015.06.14 19:52

질문이 들어오게 되어 간단히 답변의 형대로 적습니다.


질문 : http://kr.deoker.com/73#comment11168374

FancyBox  홈페이지 : http://fancyapps.com/fancybox/

질문 하신분의 홈페이지 : http://daeman.tistory.com/165


질문은 FancyBox 의 여백을 없에 달라고 하시던 질문 이었습니다. 


 우선 옵션상에서 padding 과 margin 을 0으로 주시면 기본 적인 margin 과 padding 이 사라집니다. 스크립트 적용시 아래와 같이 옵션을 주시거나 스크립트 내부에서 default 값을 변경해 주시면 됩니다.


$('.fancybox').fancybox({margin:0,padding:0});

혹은 스크립트 내부에서

$.extend(F, {
		// The current version of fancyBox
		version: '2.1.5',

		defaults: {
			padding : 0, //수정
			margin  : 0, // 수정


하지만 하단에 우측 상단의 X 버튼 때문에 가로 스크룰이 생기게 되는대요.


위와 같이 가로 스크롤이 생기게 되면서 모바일에서는 가로 스크롤이 생기면서 움직이게됨





이 부분은 jquery.fancybox.css 에서 fancybox-close 를 수정하여 없앨 수 있습니다.

.fancybox-close {
	position: absolute;
	top: 0px; /* 수정 */
	right: 0px; /* 수정 */
	width: 36px;
	height: 36px;
	cursor: pointer;
	z-index: 8040;
}

위의 스타일이 적용된 모습입니다.



absolute 로 버튼이 넘어가지 않기 때문에 더이상 하단 스크롤이 생기지 않습니다.



저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

  1. AND+ 2015.06.14 23:03 신고

    와 당신의 지식에 감탄했습니다^_^!!!! 직접 글도 써주시고 너무너무 감동입니다~!!!

튜토리얼북
블로그 이미지 눈싹 님의 블로그
VISITOR 오늘167 / 전체580,720