Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12

fancybox1 버그 잡기

fancybox1를 사용하는데 ie에서 골치아픈 문제가 있었다. 사용하기 전에 알았다면 fancybox를 사용하지 않고 colorbox를 사용했을 것이다. (fancybox2에는 이런 문제가 없다. 단, fancybox2는 상업적 사용 금지다. 1은 가능하다.)

ie6,7(익스플로러6,7)에서 아이콘들이 보이지 않는 상황 해결

fancybox의 설치 방법해결방법이 함께 제공되고 있기 때문에 버그라고 하기까지는 뭐하다고 할 수도 있겠다. 하지만 readmore를 클릭해야만 볼 수 있기 때문에 이건 좀 아니다 싶다.

해결은 간단하다. fancybox 폴더를 root에 두거나, css파일로 들어가서 /* ie */ 라고 써 있는 거 아래쪽 부분의 src를 모두 절대경로로 바꿔주는 것이다.

만약 https를 사용하고 있다면 이것도 문제다. ie6는 png의 (반)투명이미지를 표시하기 위해서 알파채널 로더를 이용한다. fancybox의 아이콘들도 모두 이걸 이용해서 표현하게 된다. 그런데 https를 사용할 경우 이걸 작동시키지 못하는 것 같다.(참고 : PNG, Transparency, IE6, AlphaImageLoader, and SSL) 그래서 아예 아이콘이 표시되지 않게 된다.

ie6에서 이미지가 박스 밖으로 튀어나오는 문제

이건 늘상 벌어지는 문제는 아닌 것 같다. fancybox 홈페이지에 있는 이미지는 ie6에서도 잘 나오기 때문이다. 그런데 내가 설치한 데서는 박스 밖으로 튀어나왔다. 원인은 padding 때문이었다. ie6는 패딩을 합쳐서 width를 판단하기 때문에, padding이 설정돼 있으면 width가 줄어들어버린다.

이걸 js에서 isIE라는 것으로 해결하고 있는 듯한데, 왜인지 작동하지를 않았다. 내가 fancybox 전문가가 될 생각까진 없었으므로 대충 해결했다. 해결방법은?

#fancybox-wrap {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	/*padding: 20px;*/
	z-index: 1101;
	display: none;
}

위 코드를 찾아서 padding을 주석처리한다.

단, 이런 식으로 했을 때 어떤 버그가 생길지는 알 수 없다. 안정성을 보장할 수는 없다는 거다. 물론 나는 ie6, ie7, firefox에서 테스트를 해 봤다. 멀쩡하게 잘 나온다.(단, ie6에서 안쪽으로 캡션을 붙이면 오른쪽이 약간 짧다. 이것 역시 padding 때문인데 이거까지 고치진 않았다. ie6지원 안 하는 부분 중 하나.)

이상이다. 에잇! 첨부터 colorbox를 알았다면 그걸 썼을 텐데 하는 생각이 든다.

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

댓글 (3개)

  • 간만에 jQuery 관련된 걸 하고 있다. http://fancybox.net/ 실제로 사용을 해야 해서 좀 찾아 봤는데 이거 괜찮은 거 같다. 아래 댓글에서 colorbox라는 것도 추천을 해 주셨는데 fancybox보다 기능이 더 많은 것 같다. 댓글 남겨 주신 분은 무거운 게 흠이라고 했지만, 크게 더 무겁게 느껴지지도 않는다. 사실 무거운 것은 이미지의 사이즈에 따라 다를 것이겠지만 말이다. 간단하고 심플하게 빨리 구현하고 싶은 분들은 fan..

  • 아.. 저도 fancy사용하기 전에 colorbox를 알았더라면 ㅋㅋ

    좋은 정보 감사합니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다