jQuery 이미지 팝업 및 겔러리 플러그인에서 상당히 널리 사용되고 있는 fancybox.
텍스트큐브로 만들어진 이 블로그에도 얼마전 적용시켜보았다.

아래의 이미지를 누르면 팬시박스 플러그인의 효과를 살펴볼 수 있다.

플러그인 설정 후 평상시 사용하던 IE9, FF4, 크롬플러스 등에서는 아무런 문제가 없어서 그동안 전혀 눈치를 못채고 있었는데…
어쩌다가 IE8에서 내 블로그에 들어와보니 심각한 문제가 있었다.

페이지의 초기 로딩은 문제 없이 이루어지지만 1~2초 후 스크롤이 멈추어 버리는 문제가 있었던 것이다.
이유가 뭘까해서 기존에 설치한 jQuery 플러그인 들을 하나하나 제거해보면서 테스트 해보았는데 원인은 결국 fancybox의 css파일에 있었다.

현재 최신버전인 fancybox 1.3.4의 내부 폴더를 보면 jquery.fancybox-1.3.4.css라는 파일이 있고 여기에 png  이미지파일을 css상에서 불러오게 되는데 여기에 대한 경로가 상대경로로 되어 있다.

해결법은 이 상대경로로 되어 있는 파일의 경로를 절대경로로 바꾸면 된다.

예를 들면 다음과 같이 말이다.

#fancybox-title-float-right {
padding: 0 0 0 15px;
background: url(‘fancybox.png‘) -55px -90px no-repeat;
}

#fancybox-title-float-right {

padding: 0 0 0 15px;

background: url(‘https://blog.nemesys.co.kr/tt/skin/blog/nocchi/script/fancybox/fancybox.png‘) -55px -90px no-repeat;
}

이렇게만 고쳐주면 멈추는 현상 없이 정상적으로 동작할 것이다.

이 글의 관련글

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *