이미지 원본 크기 팝업(새창) 띄우기
쇼핑몰이나 갤러리 프로젝트와 같은 제품이나 상품에 관한 이미지를 보여주는 사이트를 개발 할 때 제품의 다양한 모습을 한정된 모니터의 크기 보여주려니 이미지가 원본보다 작아질 수밖에 없습니다.
이럴 때 제품의 다양한 이미지를 클릭하면 팝업(새창)으로 이미지 원본이 그대로 띄워지게 해달라는 현업들의 요구가 많지요. 하여 오늘은 이미지 원본 크기 팝업(새창) 띄우기를 알아볼까 합니다.
그렇다고 팝업이 되는 소스 파일을(.html, .aspx, .jsp 등) 만들 필요는 없습니다.
단순히 자바스크립트 만으로 해결이 가능 합니다.
먼저 아래와 같이 body 태그 안에 이미지 컨트롤을 코딩 합니다.
<body>
<img id="imgControll" name="imgControll" src="https://c1.staticflickr.com/8/7166/6616140965_81faceea87_b.jpg" width="150" height="100" onclick="fnImgPop(this.src)">
</body>
그리고 이미지를 클릭했을 때의 fnImgPop 자바스크립트 함수를 아래와 같이 코딩 합니다.
<script type="text/javascript">
<!--
function fnImgPop(url){
var img=new Image();
img.src=url;
var img_width=img.width;
var win_width=img.width+25;
var img_height=img.height;
var win=img.height+30;
var OpenWindow=window.open('','_blank', 'width='+img_width+', height='+img_height+', menubars=no, scrollbars=auto');
OpenWindow.document.write("<style>body{margin:0px;}</style><img src='"+url+"' width='"+win_width+"'>");
}
//-->
</script>
어떠세요? 엄청 쉬우시줘...ㅎ
이상으로 이미지 원본 크기 팝업(새창) 띄우기에 대해서 알아보았습니다.
오늘도 행복한 하루 되세요~~~^^
이럴 때 제품의 다양한 이미지를 클릭하면 팝업(새창)으로 이미지 원본이 그대로 띄워지게 해달라는 현업들의 요구가 많지요. 하여 오늘은 이미지 원본 크기 팝업(새창) 띄우기를 알아볼까 합니다.
그렇다고 팝업이 되는 소스 파일을(.html, .aspx, .jsp 등) 만들 필요는 없습니다.
단순히 자바스크립트 만으로 해결이 가능 합니다.
먼저 아래와 같이 body 태그 안에 이미지 컨트롤을 코딩 합니다.
<body>
<img id="imgControll" name="imgControll" src="https://c1.staticflickr.com/8/7166/6616140965_81faceea87_b.jpg" width="150" height="100" onclick="fnImgPop(this.src)">
</body>
그리고 이미지를 클릭했을 때의 fnImgPop 자바스크립트 함수를 아래와 같이 코딩 합니다.
<script type="text/javascript">
<!--
function fnImgPop(url){
var img=new Image();
img.src=url;
var img_width=img.width;
var win_width=img.width+25;
var img_height=img.height;
var win=img.height+30;
var OpenWindow=window.open('','_blank', 'width='+img_width+', height='+img_height+', menubars=no, scrollbars=auto');
OpenWindow.document.write("<style>body{margin:0px;}</style><img src='"+url+"' width='"+win_width+"'>");
}
//-->
</script>
어떠세요? 엄청 쉬우시줘...ㅎ
이상으로 이미지 원본 크기 팝업(새창) 띄우기에 대해서 알아보았습니다.
오늘도 행복한 하루 되세요~~~^^
divdiv 생기는거 어떻게 없애나요?
답글삭제와 덕분에 문제를 해결하였습니다. 감사합니다.
답글삭제