imageResize] 한줄에 있는 이미지 높이를 하나로 맞춰봅니다.

0)
이미지를 블로그에 올리다가, 한줄에 여러개 올리는 경우
한줄에 다 안 올라가는 경우가 있고, 높이가 들쭉날쭉한 경우도 있는데요,

1)
그런 경우에, 이미지높이를 맞춰서 표시해보자..는 목표로
이미지 자동 높이편집기를 만들어봤습니다.

 

..

2)

<SCRIPT>

var imageResizing130902_1;

(function(){

imageResizing130902_1=function () {
  var
    d=document.getElementById('editor130902_5')
    , v=document.getElementById('htmlv130902_5')

    , i, l
    , ov=''
    , refer , n, nn, nf, iw

    , prc=[], pp
    ;

//  v.innerText=d.innerHTML;

  for (refer=[d]; refer.length; ) {
    n=refer.pop();
    ov+=n.nodeName+' ';
 
    if (nn=n.nextSibling) {
      refer.push(n.nextSibling);
      }

    if (nf=n.firstChild) {
      ov+='{ '; // have child..
      prc.length=0;

      refer.push(n.firstChild);
      }

    if (n.nodeName=='IMG') {
      prc.push(n);
      }

    if (((n.nodeName!='IMG')&&(n.nodeName!='#text'))||(!n.nextSibling)) {
      if (prc.length>1) {

        iw=0;
        for (i=0; i<prc.length; i++) {
          iw+=prc[i].offsetWidth/prc[i].offsetHeight;
          }

        iw=(645+5-prc.length*5)/(iw);

        while (prc.length) {
          pp=prc.pop();
          pp.width=(pp.offsetWidth/pp.offsetHeight*iw)<<0;
          pp.height=iw<<0;
          }
        }
      else {
        prc.length=0;
        }

      ov+='/ '; // can not count about pop counts..
      }
  
    }

  v.innerText=ov;
  }

})();

</SCRIPT>

htmlv130902_5<BR>
<TEXTAREA style="WIDTH: 300px; HEIGHT: 100px; OVERFLOW: auto" id=htmlv130902_5 name=htmlv130902_5></TEXTAREA>
<br><br>
editor130902_5<BR>
<DIV style="BACKGROUND-COLOR: #eeeeee; WIDTH: 300px; HEIGHT: 200px; OVERFLOW: auto"
id=editor130902_5 onmouseup=imageResizing130902_1(this);
contentEditable=true>
<div>abc <img width=500 height=100> <img width=800 height=100></div>
<div>abc <img width=300 height=100> <img width=200 height=100></div>
</DIV>

-- 새 창에 샘플 보여주기.. --

..

3)

htmlv130902_5


editor130902_5

abc

abc

..

4)
editor131208_5 의 편집부분에 이미지 포함한 내용들을 넣고
텍스트부분을 클릭하면

이미지들이 자동조정된다..라는 형식입니다. (버튼..까지는 생각 안해봤습니다..)

..

5)
키보드를 이용한 편집..의 문제때문에(?) onmouseup 을 사용했구요,
기준크기는 cyworld blog 1단크기기준(?)인 645 폭에 공백을 5 로 설정했습니다.

element 수집식은 지난번에 올려둔 
2013/12/06 - [string] - html구조]..를 단순화해봤습니다. 를 이용했구요.

IMG 태그를 순차적(?)으로 받아가다가
받은 태그가 가 IMG 나 #text 가 아닌 경우, 또는 이후에 더이상 형제태그가 없을 경우( ! .nextSibling )를 기준으로

IMG 태그를 1개 이상 받았을 때 이미지 높이를 하나로 맞추는 방식입니다.

..

5)
언제나처럼(?) 버그가 있습니다.

샘플의 위쪽 div 의 경우는 잘(?) 조정되었습니다만,

아래쪽 div 변동내용을 보시다시피(?), height 값이 100 이상으로 커졌죠.
좌우 폭만을 기준으로 변동시켰기 때문입니다.

.. 그 부분에 대한 수정은 

*참고* 
iw=(645+5-prc.length*5)/(iw); 다음 줄에 들어갈 내용입니다 ^^;..

var iw2;

iw2=prc[0].offsetHeight;
for (i=1; i<prc.length; i++) {
  if (iw2<prc[i].offsetHeight) iw2=prc[i].offsetHeight;
  }
if (iw2<iw) iw=iw2;

요런 식이 되겠죠. 
큰놈(?)을 받아서, 그 값이 계산값보다 작으면 큰놈을 적용한다..라는 내용입니다 ^^;..

..

wantHate killofki@. 

http://pba.kr