게시판 첨부 이미지 확대 팝업창 눈으로만 감상하게 정보
게시판 첨부 이미지 확대 팝업창 눈으로만 감상하게
본문
bbs/view_image.php
이미지 자동 리사이즈를 위해 스크립트 로드 (head.sub.php 다음줄)
include_once(G5_PATH.'/head.sub.php');
add_javascript('<script src="'.G5_JS_URL.'/viewimageresize.js"></script>',0); // 팝업의 넓이 또는 모바일에서 가로 맞춤용
중간부분 이미지 출력 코드 부분 수정 (파일 없다는 메시지 윗부분)
$img = '<div id="popup_image"><img src="'.$fileurl.'" alt="" width="'.$width.'" height="'.$height.'" class="draggable"></div>';
} else {
alert_close('파일이 존재하지 않습니다.');
}
파일의 하단부 jquery 코드 부분만 아래로 교체
$(function() {
$(".draggable").mousedown(function(e) {
window.close();
});
$(".draggable").click(function(e) {
window.close();
});
$(".draggable").on("touchstart", function(e) {
if (e.originalEvent.touches.length !== 2) { window.close(); }
});
$(".draggable").on("touchmove", function(e) {
if (e.originalEvent.touches.length !== 2) { window.close(); }
});
$(".draggable").on("touchend", function(e) {
return false;
});
$("#popup_image").viewimageresize();
});
css/default.css 및 css/mobile.css 적당한곳에 아래 내용 추가
/* 팝업 확대 이미지 */
#popup_image { width:100%; height:100%; }
.draggable { position:relative;top:0;left:0; }
(동작 방식)
팝업창에 떠있는 이미지를 마우스로 누르면 창이 닫히게 됩니다.
창 크기를 조절하면 가로폭이 창 넓이에 맞게 자동으로 리사이징 됩니다.
모바일에선 한손가락으로 터치가 시작되면 역시 창이 닫힙니다.
모바일에서 두손가락으로 확대, 드래그시에만 창이 안닫히도록 되어있습니다.
(목적)
원본 이미지 퍼가기를 다소 귀찮게 하기 위함입니다.
마우스 드래그랑 콘텍스트 메뉴도 같이 막아두면 효과적입니다.
그래도 퍼갈려고 마음먹으면 브라우저 개발자 모드등으로 가져가겠지만요.
트래픽 보호를 위한다면 서버단에서 rewrite rule 로 막는 방법이 가장 확실하겠지요
추천
4
4
댓글 4개
수고하셨습니다.
감사합니다!!!
감사합니다
감사합니다~~
