menu

사진을 여러장 올릴 때는 세로 길이가 같아야 보기좋음. 그런데 기본 설정은 가로 길이가 같은 거임.

예전엔 이미지들의 세로 길이가 같게 만들었을 때의 각 이미지의 가로 길이를 계산 해주는 코드를 짜서 값을 구한다음에 일일히 이미지 너비를 지정해주는 방법을 썼음. 근데 불편하고 귀찮음.

그래서 자동으로 정렬해주는 방법을 찾을려고 노력함.

일단 티스토리는 <table> 태그를 이용해 한줄짜리 표를 만들어서 여러 이미지를 한 줄에 보여줌. 흠.. 고전적인 방법이군!

암튼 위의 정보를 참고해서 일단 순수 CSS로 이미지 정렬을 시도해봤는데 잘 안 됨.

그으래서 걍 속편하게 자바스크립트로 구현함. 로딩이 좀 느려지겠지만 알게뭐야 요새 컴 발전하는 속도가 빨라서 괜찮을 듯.

이젠 컴퓨터가 알아서 사진 가로 길이를 조절해줌. 크으 자동화시스템에 취한다!

JS

function imgAdjust() {
    $(".article table .imageblock:only-child").parent("td").parent("tr").parent("tbody").parent("table").addClass("imageblock");
    $("table.imageblock").attr({"cellspacing":0});
    $("table.imageblock img").attr("width",null);

    var obj, flex, i, j;                         //.img로 묶인 이미지를 높이에 맞게 정렬
    $("table.imageblock tr").css({"display":"flex"}).each(function(){
        obj = new Array();
        i = $("table.imageblock tr").index(this);
        $(this).children().each(function(){
            obj.push([$(this).children("span").children("img").width(),$(this).children("span").children("img").height()]);
            // console.log(i+"번 값 저장: " + obj[i][0] + ", " + obj[i][1]);
        });
        $(this).children().each(function(){
            j = $("table.imageblock tr:nth(" + i + ") > td").index(this);
            flex = 100 * obj[j][0] * obj[0][1] / obj[j][1];
            // console.log(i+"번 .img의 "+j+"번째 img 정렬: " + flex);
            $(this).css( {"flex" : flex + "%"} );
        });
    });
}

$(window).load(function() {
    imgAdjust();
});

CSS

.article table.imageblock { border-spacing: 0; width:100%;/* for IE */ }	/* 2, 3장의 사진을 넣었을 때 */
.article table.imageblock td { padding: 0 .5em; display: block; }
.article table.imageblock td:first-child { padding-left: 0; }
.article table.imageblock td:last-child { padding-right: 0; }
.article table.imageblock td > .imageblock {width: inherit!important;}

작동 확인 ^^

넘나 멋진 것! 끝.

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

  1. 퍄퍄! 엣지랑 파폭에 생기던 오류까정 해결.

  2. IE에서 생기던 오류까지 해결 ^^

  3. 어떻게.. 적용하는지 알수 있을까요?

    • 블로그 관리 페이지에 [HTML/CSS 편집]에서 수정하시면 됩니다.

      CSS는 그대로 붙여넣으면 되고,
      JS는 HTML에 <script></script>태그를 만들어서 그 안에 넣으세요.

      자세한 것은 자바스크립트 적용 등으로 검색하시면 도움이 될 것 같습니다.

      link delete 2017.01.08 17:28 신고 Favicon of http://blog.jinh.kr JinH
  4. HTML은 어느 부분에 넣어야하나여? HEAD 쪽에 올리는 건가요?

    • 네, <head> 태그 안에 넣으면 됩니다.
      그리고 jQuery 라는 라이브러리를 써야하거든요. 아래 코드도 써 넣으세요.
      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

      link delete 2017.01.09 04:40 신고 Favicon of http://blog.jinh.kr JinH

퍼가지 마세요...
링크로 공유하세요 ㅠㅠ
부탁할게요 ^_<~*

test 3-1

test 3-2

test 3-3

test 4-1

test 4-2

test 4-3

모든 글 보기
공지
방명록
Share to...

페이스북 공유

트위터 공유

구글+ 공유

카카오스토리 공유

밴드 공유

Follow & Contact

Facebook

Twitter

Mail

RSS 구독

2007-2016 © JinH