리스트화면에서 새창띄울때...원본사이즈로 보여주기...?
아꽈님께서 알려주시고, 7쟁이님의 스킨에서 힌트를 얻어
갤러리스킨의 리스트화면에서 보여지는 이미지를 클릭시, 새창이 뜨서 원본사이즈의
이미지를 보여줄수 있도록 한번 만들어 봤습니다.
[list.skin.php 일부내용]
<!-- 새창띄우기 스크립터 --//-->
<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 style='margin:0'>");
imageWin.document.write("<img src='" + imgObj.src + " 'onclick=window.close() style=position:auto;top:0pt;left:0pt;cursor:hand;>");
imageWin.document.write("</body><html>");
imageWin.document.title = ("원본보기")
}
</script>
--- 중간생략하고... --
<!-- 리스트에서 이미지 보여주는 부분 --// -->
for ($i=0; $i<count($list); $i++) {
$img_source = "$g4[path]/data/file/$bo_table/".urlencode($list[$i][file][0][file]); // 이미지새창보기시에 사용
echo "<tr>";
echo "<td width='{$td_width}%' valign='top' align='center'>";
echo "<table border='0' cellpadding='2' cellspacing='0' style='border:0px solid #cccccc'>";
echo "<tr>";
echo "<td align='center' style='word-break:break-all; padding:10 10 5 10;'>";
echo "<a href=\"javascript:showImgWin('{$img_source}')\">이미지사진위치</a>";
echo "<tr>";
echo "<td height='20' align='center'>{$checkbox} <a class='b1' href='{$view_href}'>{$subject}</a> {$comment}</td>";
echo "</tr>";
echo "</table><br>";
echo "</td>";
}
?>
질문에 불필요한 코드를 지우고 적었습니다만, 위에서 처럼
스크립터를 만들고 '이미지사진위치(실제리스트사진있는곳)'를 클릭하면
해당 이미지의 새창을 띄워주는거 까지는 잘됩니다.
문제는.... 해당 원본의 이미지가 화면보다 클경우인데...
이렇게 화면을 벗어날 정도로 원본사진의 크기가 큰경우 짤려서 보이지를 않습니다.
기존 그누보드의 view.skin.php 에서처럼...이미지클릭시, 원본 이미지가 화면보다 크더라도
마우스로 사진을 이리저리 땡기면 전체이미지를 다 볼수있도록
위 리스트에서 새창을 띄웠을때도 그렇게 할수 있는 방법이 없을까요?
갤러리스킨의 리스트화면에서 보여지는 이미지를 클릭시, 새창이 뜨서 원본사이즈의
이미지를 보여줄수 있도록 한번 만들어 봤습니다.
[list.skin.php 일부내용]
<!-- 새창띄우기 스크립터 --//-->
<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 style='margin:0'>");
imageWin.document.write("<img src='" + imgObj.src + " 'onclick=window.close() style=position:auto;top:0pt;left:0pt;cursor:hand;>");
imageWin.document.write("</body><html>");
imageWin.document.title = ("원본보기")
}
</script>
--- 중간생략하고... --
<!-- 리스트에서 이미지 보여주는 부분 --// -->
for ($i=0; $i<count($list); $i++) {
$img_source = "$g4[path]/data/file/$bo_table/".urlencode($list[$i][file][0][file]); // 이미지새창보기시에 사용
echo "<tr>";
echo "<td width='{$td_width}%' valign='top' align='center'>";
echo "<table border='0' cellpadding='2' cellspacing='0' style='border:0px solid #cccccc'>";
echo "<tr>";
echo "<td align='center' style='word-break:break-all; padding:10 10 5 10;'>";
echo "<a href=\"javascript:showImgWin('{$img_source}')\">이미지사진위치</a>";
echo "<tr>";
echo "<td height='20' align='center'>{$checkbox} <a class='b1' href='{$view_href}'>{$subject}</a> {$comment}</td>";
echo "</tr>";
echo "</table><br>";
echo "</td>";
}
?>
질문에 불필요한 코드를 지우고 적었습니다만, 위에서 처럼
스크립터를 만들고 '이미지사진위치(실제리스트사진있는곳)'를 클릭하면
해당 이미지의 새창을 띄워주는거 까지는 잘됩니다.
문제는.... 해당 원본의 이미지가 화면보다 클경우인데...
이렇게 화면을 벗어날 정도로 원본사진의 크기가 큰경우 짤려서 보이지를 않습니다.
기존 그누보드의 view.skin.php 에서처럼...이미지클릭시, 원본 이미지가 화면보다 크더라도
마우스로 사진을 이리저리 땡기면 전체이미지를 다 볼수있도록
위 리스트에서 새창을 띄웠을때도 그렇게 할수 있는 방법이 없을까요?
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인