게시판 첨부 이미지 확대 팝업창 눈으로만 감상하게 > 그누보드5 팁자료실

그누보드5 팁자료실

게시판 첨부 이미지 확대 팝업창 눈으로만 감상하게 정보

게시판 첨부 이미지 확대 팝업창 눈으로만 감상하게

본문

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 로 막는 방법이 가장 확실하겠지요

추천3

댓글 전체

전체 1,282 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

진행중 포인트경매

  1. 그누보드/영카트 채팅솔루션

    참여28 회 시작18.12.11 09:03 종료18.12.16 09:03

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT