Skip to Content
Go Back
안형우

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


작업물

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

[jQuery] 레이어 팝업으로 이미지를 띄울 때 이미지가 다 불러진 다음 이미지 사이즈를 계산해서 화면 정 중앙에 오게 하기

요약: $('.certainImage').bind('load', functionName); 형식의 코드를 사용하면 된다.

fancybox 라이브러리는 강력한 이미지 갤러리 기능을 갖추고 있다.

그런데 ie6~8에서 화면이 로드되고 약 1~2초 정도 얼어 버리는 (프리징) 현상이 관찰됐다.

어차피 이미지를 확대해 보여 주는 기능밖에 없었기 때문에 fancybox를 제거하고 날코딩을 하기로 결정했다.

소요될 거라 생각한 시간은 대략 1시간이었다. 그러나 역시 3시간이 걸렸다.

일단 화면을 덮는 반투명 검은 막(black mask) 역시 내가 예전에 만들어 둔 코드를 사용했다.

그리고 콘텐트를 불러 와서 화면 한 가운데 박는 코드도 내가 예전에 만들어 둔 코드를 사용했다.

그런데 문제가 생겼다! 이런 젠장! 이미지가 완전히 로드되기 전에 박스 너비와 높이를 계산하기 때문에 높이와 너비 모두 0으로 처리 되는 버그가 발견됐다.

이미지가 전부 로드될 때까지 기다렸다가 높이 너비를 계산해야 이미지가 화면의 정 가운데 뜰 수 있는데 말이다.

이것 때문에 한참을 헤맸다. 그리고 결국 해법을 발견했다.

javacript에는 onLoad 라는 이벤트 핸들러가 있다. 이놈이 바로, 이미지까지 완전히 로딩이 끝난 후 어떤 걸 실행하라는 이벤트 핸들러다.

jQuery에서 이벤트를 붙일 때는 접두어 on을 빼고 사용한다.

그래서 아래와 같은 코드로 해결했다.

function loadLargeImage(href){

	if($('.large-image-box img').length == 0){
		//href를 받아서 이미지 객체를 만든다.
		var $img = $('<img alt="" />',{
			'src': href,
			'style': 'border: 10px solid white;'
		});

		//박스 안에 이미지를 박는다
		$('.large-image-box').append($img);

		//이미지가 완전히 로드되면 이미지 너비와 높이를 변수로 화면 정 중앙 위치를 계산하고 페이드인 한다.
		$img.bind('load', function(){

			$('.large-image-box').css({
				'left': ( $(window).scrollLeft() + ($(window).width() - $(this).width())/2 ) + 'px',
				'top': ( $(window).scrollTop() + ($(window).height() - $(this).height())/2 ) + 'px'
			}).fadeIn();	
		});

	}else{

		$('.large-image-box').css({
			'left': ( $(window).scrollLeft() + ($(window).width() - $(this).width())/2 ) + 'px',
			'top': ( $(window).scrollTop() + ($(window).height() - $(this).height())/2 ) + 'px'
		}).fadeIn();

	}	

}

유익한 것을 배운 시간이었다.

이제 반투명 검은 막과 함께 레이어 팝업을 띄우는 걸 능숙하게 할 수 있다. 물론, 내가 저장해 둔 코드를 긁어야겠지만 말이다.

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


작업물

댓글 (1개)

답글 남기기

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