게시판 첨부 이미지 클릭 시 팝업창 사이즈 고정

게시판 첨부 이미지 클릭 시 팝업창 사이즈 고정

QA

게시판 첨부 이미지 클릭 시 팝업창 사이즈 고정

본문

업로드 하는 이미지의 크기가 중구난방이라 팝업창 사이즈도 너무 들쭉날쭉인데 팝업창의 가로 세로를 고정으로 ex)500px 500px 세로 스크롤을 하려면 어떻게 해야하나요?

 


//view.skin.php
    $("a.view_image").click(function() {
        window.open(this.href, "medium_image", "location=yes,links=no,toolbar=no,top=10,left=10,width=10,height=10,resizable=yes,scrollbars=no,status=no");
        return false;
    });
 
//bbs/view_image.php
<?php
include_once('./_common.php');
 
$g5['title'] = '이미지 크게보기';
include_once(G5_PATH.'/head.sub.php');
 
$filename = isset($_GET['fn']) ? preg_replace('/[^A-Za-z0-9 _ .\-\/]/', '', $_GET['fn']) : '';
 
if(function_exists('clean_relative_paths')){
    $filename = clean_relative_paths($filename);
}
 
$extension = pathinfo($filename, PATHINFO_EXTENSION);
 
if ( ! preg_match('/(jpg|jpeg|png|gif|bmp|webp)$/i', $extension) ){
    alert_close('이미지 확장자가 아닙니다.');
}
 
if(strpos($filename, G5_DATA_DIR.'/editor')) {
    $editor_file = strstr($filename, 'editor');
    $filepath = G5_DATA_PATH.'/'.$editor_file;
} else if(strpos($filename, G5_DATA_DIR.'/qa')) {
    $editor_file = strstr($filename, 'qa');
    $filepath = G5_DATA_PATH.'/'.$editor_file;
} else {
    $editor_file = '';
    $filepath = G5_DATA_PATH.'/file/'.$bo_table.'/'.$filename;
}
 
$file_exists = (is_file($filepath) && file_exists($filepath)) ? 1 : 0;
 
if($file_exists = run_replace('exists_view_image', $file_exists, $filepath, $editor_file)) {
    $size = $file_exists ? run_replace('get_view_imagesize', @getimagesize($filepath), $filepath, $editor_file) : array();
    if(empty($size))
        alert_close('이미지 파일이 아닙니다.');
 
    $width = (isset($size[0]) && $size[0]) ? (int) $size[0] : 0;
    $height = (isset($size[1]) && $size[1]) ? (int) $size[1] : 0;
 
    if($editor_file)
        $fileurl = run_replace('get_editor_content_url', G5_DATA_URL.'/'.$editor_file);
    else
        $fileurl = run_replace('get_file_board_url', G5_DATA_URL.'/file/'.$bo_table.'/'.$filename, $bo_table);
 
    $img_attr = ($width && $height) ? 'width="'.$width.'" height="auto"' : '';
 
    $img = '<img src="'.$fileurl.'" alt="" class="draggable" style="position:relative;top:0;left:0;cursor:move; max-width:100%;">';
} else {
    alert_close('파일이 존재하지 않습니다.');
}
?>
 
<div class="bbs-view-image"><?php echo $img ?></div>
 
<script>
 
jQuery(function($){
 
$.fn.imgLoad = function(callback) {
    return this.each(function() {
        if (callback) {
            if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
                callback.apply(this);
            }
            else {
                $(this).on('load', function(){
                    callback.apply(this);
                });
            }
        }
    });
};
 
    $(".bbs-view-image img").imgLoad(function(){
 
        var win_w = <?php echo $width ?>;
        var win_h = <?php echo $height ?> + 70;
 
        if( !win_w || !win_h ){
            win_w = $(this).width();
            win_h = $(this).height();
        }
 
        var win_l = (screen.width - win_w) / 2;
        var win_t = (screen.height - win_h) / 2;
 
        if(win_w > screen.width) {
            win_l = 0;
            win_w = screen.width - 20;
 
            if(win_h > screen.height) {
                win_t = 0;
                win_h = screen.height - 40;
            }
        }
 
        if(win_h > screen.height) {
            win_t = 0;
            win_h = screen.height - 40;
 
            if(win_w > screen.width) {
                win_w = screen.width - 20;
                win_l = 0;
            }
        }
 
        if(win_w < screen.width) {
            if(window.outerWidth){
                win_w = win_w + (window.outerWidth - (document.documentElement.clientWidth || window.innerWidth));
            }
        }
 
        window.moveTo(win_l, win_t);
        window.resizeTo(win_w, win_h);
    });
 
    var is_draggable = false;
    var x = y = 0;
    var pos_x = pos_y = 0;
 
    $(".draggable").mousemove(function(e) {
        if(is_draggable) {
            x = parseInt($(this).css("left")) - (pos_x - e.pageX);
            y = parseInt($(this).css("top")) - (pos_y - e.pageY);
 
            pos_x = e.pageX;
            pos_y = e.pageY;
 
            $(this).css({ "left" : x, "top" : y });
        }
 
        return false;
    });
 
    $(".draggable").mousedown(function(e) {
        pos_x = e.pageX;
        pos_y = e.pageY;
        is_draggable = true;
        return false;
    });
 
    $(".draggable").mouseup(function() {
        is_draggable = false;
        return false;
    });
 
    $(".draggable").dblclick(function() {
        window.close();
    });
});
</script>
 
<?php
include_once(G5_PATH.'/tail.sub.php');

 

이 질문에 댓글 쓰기 :

답변 2

view.skin.php에서

    $("a.view_image").click(function() {
        window.open(this.href, "large_image", "location=yes,links=no,toolbar=no,top=10,left=10,width=10,height=10,resizable=yes,scrollbars=no,status=no");
        return false;
    });
=>
    $("a.view_image").click(function() {
        window.open(this.href, "medium_image", "location=yes,links=no,toolbar=no,top=10,left=10,width=500,height=500,resizable=yes,scrollbars=yes,status=no");
        return false;
    });
bbs/view_image.php에서

<div class="bbs-view-image"><?php echo $img ?></div>
<script>
jQuery(function($){
$.fn.imgLoad = function(callback) {
    return this.each(function() {
        if (callback) {
            if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
                callback.apply(this);
            }
            else {
                $(this).on('load', function(){
                    callback.apply(this);
                });
            }
        }
    });
};
    $(".bbs-view-image img").imgLoad(function(){
        var win_w = <?php echo $width ?>;
        var win_h = <?php echo $height ?> + 70;
        if( !win_w || !win_h ){
            win_w = $(this).width();
            win_h = $(this).height();
        }
        var win_l = (screen.width - win_w) / 2;
        var win_t = (screen.height - win_h) / 2;
        if(win_w > screen.width) {
            win_l = 0;
            win_w = screen.width - 20;
            if(win_h > screen.height) {
                win_t = 0;
                win_h = screen.height - 40;
            }
        }
        if(win_h > screen.height) {
            win_t = 0;
            win_h = screen.height - 40;
            if(win_w > screen.width) {
                win_w = screen.width - 20;
                win_l = 0;
            }
        }
        if(win_w < screen.width) {
            if(window.outerWidth){
                win_w = win_w + (window.outerWidth - (document.documentElement.clientWidth || window.innerWidth));
            }
        }
        window.moveTo(win_l, win_t);
        window.resizeTo(win_w, win_h);
    });
    var is_draggable = false;
    var x = y = 0;
    var pos_x = pos_y = 0;
    $(".draggable").mousemove(function(e) {
        if(is_draggable) {
            x = parseInt($(this).css("left")) - (pos_x - e.pageX);
            y = parseInt($(this).css("top")) - (pos_y - e.pageY);
            pos_x = e.pageX;
            pos_y = e.pageY;
            $(this).css({ "left" : x, "top" : y });
        }
        return false;
    });
    $(".draggable").mousedown(function(e) {
        pos_x = e.pageX;
        pos_y = e.pageY;
        is_draggable = true;
        return false;
    });
    $(".draggable").mouseup(function() {
        is_draggable = false;
        return false;
    });
    $(".draggable").dblclick(function() {
        window.close();
    });
});
</script>
=>
<div class="bbs-view-image" style="width:500px; height:500px; overflow:auto;"><?php echo $img ?></div>
 
<script>
jQuery(function($){
    // 이미지 로드 후 크기 조정 코드 제거 (전체 삭제)
    
    // 드래그 기능은 유지
    var is_draggable = false;
    var x = y = 0;
    var pos_x = pos_y = 0;
 
    $(".draggable").mousemove(function(e) {
        if(is_draggable) {
            x = parseInt($(this).css("left")) - (pos_x - e.pageX);
            y = parseInt($(this).css("top")) - (pos_y - e.pageY);
 
            pos_x = e.pageX;
            pos_y = e.pageY;
 
            $(this).css({ "left" : x, "top" : y });
        }
        return false;
    });
 
    $(".draggable").mousedown(function(e) {
        pos_x = e.pageX;
        pos_y = e.pageY;
        is_draggable = true;
        return false;
    });
 
    $(".draggable").mouseup(function() {
        is_draggable = false;
        return false;
    });
 
    $(".draggable").dblclick(function() {
        window.close();
    });
});
</script>
답변을 작성하시기 전에 로그인 해주세요.
전체 128,510 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT