반응형으로 컨텐츠 페이지를 작성하는 경우에 본문내의 이미지를 어떻게 확대하여 보여줄 것인가에 대한 고민을 하게 된다. 아직까지 자바스크립트 플러그인으로 제공되는 LightBox류들은 멋진 트랜지션과 함께 확대는 해주긴 하지만, 모바일에서 확대했을 때에는 본문용 크기나 모달에서 보여주는 크기나 거기서 거기다. 왜냐하면 어차피 모바일 가로폭 이상을 넘지 못하기 때문이다.
직접 서비스를 제공하려고 한다면 모바일에서 본문용 이미지를 어떻게 확대해서 볼 수 있을까 고민을 하게 된다. 언뜻 생각하면 몇 가지 아이디어가 떠오른다.
- Pinch Zoom 라이브러리를 설치하여, 이미지를 터치 제스처로 확대할 수 있도록 한다.
가장 기술적이고 구현되면 좋은 기술이다. 확대 시 표시된 그 상태에서만 커진다면 확대된 이미지가 해상도가 엉망일 것이며, 확대시 해상도를 보존하려면 역으로 큰 이미지를
transform으로 줄여서 표시한 이후에 확대시 정상적인 크기로 돌리는 방식을 취할 수 있지만 굉장히 복잡하다. head의scalable을 이용하여 본문 자체를 이용자가 확대할 수 있도록 한다. 위 보다는 괜찮은 생각이다. 하지만 더블터치는 직관적이지 않으며, 이런경우 이용자의 제스처 실수로 인해서 UI가 엉망으로 깨지는 경우가 허다하다. 물론 이 방법도 좋다.iframe으로scalable이 가능한 이미지 표시용 페이지를 만들어서 표시한다. 해봤는데 안 된다. 만약 된다고 하더라도 1.에서의 문제처럼 이미지 영역 안에서만 커진다면 굉장히 답답할 것이다.
위와 같은 여러가지 방법을 강구하다가 아주 오래전에 javascript로 새탭을 띄우는 코드가 생각나서, 이것을 한 번 이용해보자하고 만들었는데, 의외로 쏠쏠하게 잘 작동하는 코드가 만들어졌다.
function simpleLightbox(imageUrl, bgColor, maxWidth){
if(typeof bgColor === 'undefined'){
bgColor = '#000';
}
if(typeof maxWidth === 'undefined'){
maxWidth = '1100px';
}
window.open('', 'simpleLightbox').document.write('<html><head><meta name="viewport" content="user-scalable=yes, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0, width=device-width" /></head><body style="margin:0;'+bgColor+';height:100%;" onclick="javascript:window.close(\'simpleLightbox\');"><table border="0" width="100%" height="100%"><tr><td valign="middle" align="center"><img style="position:relative;z-index:2;width:100%;max-width:'+maxWidth+';" src="'+imageUrl+'"/></td></tr></table></body></html>');
}
평소 프로젝트에서도 많이 쓰고, 이 블로그에서도 이미지를 클릭하면 작동이 되는 스크립트이다. 안드로이드에서는 새탭이 아닌것처럼 순식간에 뜨고, iOS 사파리의 경우에는 탭 전환 에니메이션이 조금 거슬리긴 하지만 닫을 땐 빠르다.
이 스크립트의 장점은 아래와 같다.
- 꼼수지만 잘 작동한다.
- 스크립트 떡칠을 하지 않아도 된다.
- 브라우저 기본 핀치줌을 이용하기 때문에 네이티브하다.
- 고전적인 스크립트이므로 구버전에도 잘 된다(아마도 IE6)
- 데스크탑도 잘 된다.
- 넘나 간단해서 문서를 볼 필요도 없이 바로 쓸 수 있다(개꿀)
넘나 간단하지만 굳이 사용예시를 쓰자면,
$('img').on('click', function(){
simpleLightbox($(this).attr('src'));
});
