팝업창 원본 이미지 퍼가기 귀찮게 하기 > 그누보드 관련 자료실

본문 바로가기
루시웹닷넷 [DX Network]
루시웹닷넷 [DX Network]
사이트 내 전체검색


회원로그인

사이트 링크 교환 공간

오른쪽 월간 베스트 5

접속자 정보

  • < 방문자의 접속 지역 >
  • 미국
    54.225.***.***

서버시간 (KST)

  • 2018/10/17
    02:48:23 AM
  • (음력 2018/09/09)

부가 서비스 코너

  • 서비스 준비중

설문조사

새로운 투표는 뭘로 할까?

그누보드 관련 자료실

팝업창 원본 이미지 퍼가기 귀찮게 하기

페이지 정보

[프로필 사진]

작성자 : 누리 쪽지보내기 작성글 보기 (2)

조회수 : 338

작성일 : 2018-04-11 23:19:32

레벨 : 6 | 경험치 : 6% | 출석일수 : 75일

추천 : 0

0.0.***.***

본문

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; }


(동작 방식)

팝업창에 떠있는 이미지를 마우스로 누르면 창이 닫힘.

창 크기를 조절하면 가로폭이 창 넓이에 맞게 자동으로 리사이징 됨.

모바일에선 한손가락으로 터치가 시작되면 역시 창이 닫힘.

모바일에서 두손가락으로 확대, 드래그시에만 창이 안닫힘.


루시웹 보조 관리자 계정

추천 0

댓글목록

등록된 댓글이 없습니다.


접속자집계

오늘
208
어제
593
최대
656
전체
179,374
Contact and information

사이트 소개 개인정보처리방침 서비스이용약관 사이트맵

Copyright © 닻별 네트웍스 (DX Network) All rights reserved.