차근차근/JAVA Script

이미지 리사이징

예쁜꽃이피었으면 2014. 10. 22. 09:58

http://zective.tistory.com/category/%23%20IT/%23%23%20JavaScript


jQuery 를 이용한 이미지 리사이징입니다.

- 소스 -

function autoImgResize(obj, maxSize) {
    obj.each(function() {
        var obj = $(this).attr({alt: "클릭하시면 원본 사이즈로 보실 수 있습니다."}).unbind("click").bind("click", function() { window.open(obj.attr("src"), ""); }).css({cursor: "pointer"});
        var width = 0, height = 0;
        width = parseInt(obj.attr("width"), 10) || parseInt(obj.css("width"), 10);
        height = parseInt(obj.attr("height"), 10) || parseInt(obj.css("height"), 10);
        if(width > maxSize) obj.css({width: maxSize+"px", height: Math.round(height * (maxSize / width))+"px"});
    });
}

- 사용예 -


1) autoImgResize($("body img"), 500);
HTML Body 부분의 모든 이미지를 가로 500 픽셀 기준으로 리사이즈

2) autoImgResize($("#content ul li img"), 500);
ID 가 'content'인 요소에 있는 ul - li 의 모든 이미지를 가로 500 픽셀 기준으로 리사이즈




http://sir.co.kr/bbs/board.php?bo_table=g4_qa&wr_id=274028


오류가 나는곳의 주소를 알려주시면 더 빠르고 정확하게 답변 받을 수 있습니다. 

오류 주소 : 일단 제나플러스 빌더를 사용하는데요. 이 빌더가 너무 좋아 계속 사용하는데 모바일때문에 문제입니다.  이미지가 프레임 밖으로 튕겨 나가서 pc 사이즈로 출력되는 현상.-관리자에서 300으로 조절하면 pc 화면도 같이 조절이되어버려서 이 방법으론 안됨. 커버니, 100%니, 다른 빌더로 깔고, 데이타 옮기고 별 짓 다 해봤는데 다 실패. 

다 말씀드리면 일주일도 모자라니... 

/m/head_sub.php 를 손봤습니다. 
---------------- 
<script> 
// 모바일에서 이미지 리사이징 
function autoImgResize(obj, maxSize) { 
    obj.each(function() { 
        var obj = $(this).attr({alt: "클릭하시면 원본 사이즈로 보실 수 있습니다."}).unbind("click").bind("click", function() { 

window.open(obj.attr("src"), ""); }).css({cursor: "pointer"}); 
        var width = 0, height = 0; 
        width = parseInt(obj.attr("width"), 10) || parseInt(obj.css("width"), 10); 
        height = parseInt(obj.attr("height"), 10) || parseInt(obj.css("height"), 10); 
        if(width > maxSize) obj.css({width: maxSize+"px", height: Math.round(height * (maxSize / width))+"px"}); 
    }); 
} 


//온로드 구간에 함수 수행(body 안의 모든 img 태그는 가로사이즈 기준으로 290px로 리사이징 처리한다. 
$(function(){ 
        autoImgResize($("body img"), 290); 
}) 
</script> 
------------------ 
첨가하니 간단히 해결되었습니다. 
전 소스에 대해 전혀 모름 공부한 적도 없음. 그래서 힘들었네요. 

근데 문제가 생겼습니다. 게시물 안에 이미지는 클릭하면 정상적으로 프리뷰가 뜨는데, 로고를 클릭하면 새창으로 로고 이미지가 떠버림, sns 아이콘 누르면 같은 현상. 모바일에서 이미지 사이즈가 290 사이즈로 됐다 안됬다 하는데 될때는 괜찮은데 안될째는 스마트폰 상단의 리프레쉬를 눌러주면 290 사이즈로 맞춰짐. 이 소스에서 뭘 손봐야 할까요? 아니면 다른데서 손봐야 하나요? 

반응형

'차근차근 > JAVA Script' 카테고리의 다른 글

이미지 슬라이드  (0) 2014.12.24
이미지 슬라이드  (0) 2014.12.24
attr() .prop() 왜 나누어졌는가  (0) 2014.10.22
썸네일 클릭하면 크게 보이게  (0) 2014.10.21
jquery 이미지 클릭 확대  (0) 2014.10.20