반응형 갤러리에서 첨부이미지 클릭시 jpg에서 크기 확대/축소 할수 있는방법이 있을까요?
본문
현재 여기에 많은 도움을 받고 계속 게시판을 검색하고 있습니다.
다름이 아니라 아무리 검색을 해도 안나와서 질문 게시판에 글을 적습니다.
반응형 사이트이고 갤러리에서 이미지 첨부후 모바일에서 점부 이미지 클릭하면
JPG파일로 모바일 크기에 맞게 나옵니다.
그런데 제가 원하는것 클릭시 이미지가 손가락으로 확대 축소를 하고 싶어 몇가지 해보았으나 안됩니다.
우선 메인페이지에 head.sub.php 파일에
<?php
if (G5_IS_MOBILE) {
echo '<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">'.PHP_EOL;
echo '<meta name="HandheldFriendly" content="true">'.PHP_EOL;
echo '<meta name="format-detection" content="telephone=no">'.PHP_EOL;
} else {
echo '<meta http-equiv="imagetoolbar" content="no">'.PHP_EOL;
echo '<meta http-equiv="X-UA-Compatible" content="IE=Edge">'.PHP_EOL;
}
if($config['cf_add_meta'])
echo $config['cf_add_meta'].PHP_EOL;
?>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=yes">
<title><?php echo $g5_head_title; ?></title>
테마 폴더에 head.sub.php
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">
이렇게 해놓았으나 그냥 고정이 됩니다.
점부파일 이미지가 모바일로 클릭시 고정이 됩니다..손가락으로 확대 축소가 안됩니다.
어떻게 보면 당연하겠지만 확장자가 보니 jpg이더군요..
혹시나 싶어 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="'.$height.'"' : '';
$img = '<img src="'.$fileurl.'" alt="" class="draggable" style="position:relative;top:0;left:0;cursor:move;max-width:100%;height:auto;">';
} else {
alert_close('파일이 존재하지 않습니다.');
}
?>
<div class="bbs-view-image"><?php echo $img ?></div>
<?
if($width > 1000){
$t_width = 1000;
$t_height = ($height / $width) * $t_width;
$width = $t_width;
$height = $t_height;
}
?>
<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');
이렇게 수정해도 안되였습니다.
방법이 있을까요?
