첨부 이미지 글보기에서 새창은 어떻게 띄우나요? 정보
그누보드 첨부 이미지 글보기에서 새창은 어떻게 띄우나요?본문
이미지를 첨부해서 글 쓴후 글보기에서
첨부한 이미지 가로가 500이 넘으면 500으로 보여주고 작으면 원사이즈로 보여주고요.
세로는 가로 비율에서 축소나 원사이즈가 되고 이미지를 클릭하면 원사이즈로
새창을 띄우고 새창에서 이미지를 클릭하면 닫히게 할려고 하는데요.
워낙에 초보라 어떻게 하는지를 모르겠네요.
아시는분 계시면 좀 도와 주세요.
첨부한 이미지 가로가 500이 넘으면 500으로 보여주고 작으면 원사이즈로 보여주고요.
세로는 가로 비율에서 축소나 원사이즈가 되고 이미지를 클릭하면 원사이즈로
새창을 띄우고 새창에서 이미지를 클릭하면 닫히게 할려고 하는데요.
워낙에 초보라 어떻게 하는지를 모르겠네요.
아시는분 계시면 좀 도와 주세요.
댓글 전체
스카이뿌아님 친절한 답변 감사합니다.
해봤는데 안되길래요.
이렇게 해결했습니다^^
<script language="JavaScript">
var imgObj = new Image();
function showImgWin(imgName) {
imgObj.src = imgName;
setTimeout("createImgWin(imgObj)", 100);
}
function createImgWin(imgObj) {
if (! imgObj.complete) {
setTimeout("createImgWin(imgObj)", 100);
return;
}
imageWin = window.open("", "imageWin",
"width=" + imgObj.width + ",height=" + imgObj.height);
imageWin.document.write("<html><body>");
imageWin.document.write("<a href='#' onclick='window.close()'><img src='" + imgObj.src + "' border=0 style='position:absolute;top:0pt;left:0pt;' alt='클릭하면 닫힙니다.'></a>>");
imageWin.document.write("</body><html>");
imageWin.document.title = ("원본 이미지보기")
}
</script>
<a href="javascript:showImgWin('<?=$file[1][href]?>')"><?=$file[1][view]?></a>
이렇게하니깐 잘되더라고요^^
근데 원사이즈 보기창에 이미지가크면 스크롤이 자동으로 생기게만 못하구있습니다^^
스크롤만되면 되는데...
위 소스에서 원사이즈보기에 스크롤문제 아시는 리플 좀 부탁합니다.
해봤는데 안되길래요.
이렇게 해결했습니다^^
<script language="JavaScript">
var imgObj = new Image();
function showImgWin(imgName) {
imgObj.src = imgName;
setTimeout("createImgWin(imgObj)", 100);
}
function createImgWin(imgObj) {
if (! imgObj.complete) {
setTimeout("createImgWin(imgObj)", 100);
return;
}
imageWin = window.open("", "imageWin",
"width=" + imgObj.width + ",height=" + imgObj.height);
imageWin.document.write("<html><body>");
imageWin.document.write("<a href='#' onclick='window.close()'><img src='" + imgObj.src + "' border=0 style='position:absolute;top:0pt;left:0pt;' alt='클릭하면 닫힙니다.'></a>>");
imageWin.document.write("</body><html>");
imageWin.document.title = ("원본 이미지보기")
}
</script>
<a href="javascript:showImgWin('<?=$file[1][href]?>')"><?=$file[1][view]?></a>
이렇게하니깐 잘되더라고요^^
근데 원사이즈 보기창에 이미지가크면 스크롤이 자동으로 생기게만 못하구있습니다^^
스크롤만되면 되는데...
위 소스에서 원사이즈보기에 스크롤문제 아시는 리플 좀 부탁합니다.
<script language="javascript">
function resizeImg(imgObj) {
// 이미지 별도 로딩으로 원래 사이즈 추출
var imgOriginal = new Image();
imgOriginal.src = imgObj.src;
// 가로와 세로 중 어느걸 기준으로 줄일지 결정
var baseAxis;
if ( (imgOriginal.width / imgObj.width) >
(imgOriginal.height / imgObj.height) )
baseAxis = 'width';
else
baseAxis = 'height';
// 결정된 기준을 바탕으로 나머지 길이를 리사이징
if (baseAxis == 'width') {
imgObj.height = Math.round(imgOriginal.height *
(imgObj.width / imgOriginal.width));
} else { // baseAxis == 'height'
imgObj.width = Math.round(imgOriginal.width *
(imgObj.height / imgOriginal.height));
}
}
</script>
//위의 소스를 gblist.skin.php 최상단에 넣어주시고.
각각 스킨마다 다르겠지만.
<a href=javascript:; onClick="resizeImg('<?=$list[$i][file_image1]?>')">
<img src='<?=$list[$i][file_image1]?>' width='150' height='120' align='top'>
</a>
[file_image1] <-- 이부분의 소스를 위와같이 자바스크립으로 대처하세요.
<-- [file_image1]란 것은 업로드 이미지1번이란 소리입니다.
function resizeImg(imgObj) {
// 이미지 별도 로딩으로 원래 사이즈 추출
var imgOriginal = new Image();
imgOriginal.src = imgObj.src;
// 가로와 세로 중 어느걸 기준으로 줄일지 결정
var baseAxis;
if ( (imgOriginal.width / imgObj.width) >
(imgOriginal.height / imgObj.height) )
baseAxis = 'width';
else
baseAxis = 'height';
// 결정된 기준을 바탕으로 나머지 길이를 리사이징
if (baseAxis == 'width') {
imgObj.height = Math.round(imgOriginal.height *
(imgObj.width / imgOriginal.width));
} else { // baseAxis == 'height'
imgObj.width = Math.round(imgOriginal.width *
(imgObj.height / imgOriginal.height));
}
}
</script>
//위의 소스를 gblist.skin.php 최상단에 넣어주시고.
각각 스킨마다 다르겠지만.
<a href=javascript:; onClick="resizeImg('<?=$list[$i][file_image1]?>')">
<img src='<?=$list[$i][file_image1]?>' width='150' height='120' align='top'>
</a>
[file_image1] <-- 이부분의 소스를 위와같이 자바스크립으로 대처하세요.
<-- [file_image1]란 것은 업로드 이미지1번이란 소리입니다.
보여주고자 하는 최대 크기(가로, 세로)를 이미지 태그의
width, height에 넣고, 이미지 URL을 지정하면 됩니다.
width, height에 넣고, 이미지 URL을 지정하면 됩니다.
