티스토리 반응형 스킨일 때 2열배열 사진, 3열배열 사진 짤림 방지 코드

티스토리를 다시 시작하게 된지 얼마 안되서 조금 헤매고 있는 중이다.

이번에 반응형 스킨을 사용하게 되면서 2열 배열, 3열 배열 이미지가 모바일에서 또는 PC에서 화면 작게 만들었을 때 짤린다는 사실을 발견했다.

사진을 일일이 나열하기 싫고, 연속되는 사진이라 배열했는데 제길!

그래서 jQuery로 만들어보기로 했다.

그래봤자 고급스럽진 못한 코드지만 가져가서 쓰실 분들은 써주시길 바란다.

1. 어떤 현상인가?

글쓰는 페이지에 보면 위와 같이 2칸 또는 3칸으로 이미지를 삽입할 수 있는 메뉴가 보인다. 예전에 네이버 블로그를 하다가 넘어온 탓에 이 기능을 (네이버에도 있다. 사용은 네이버가 훨씬 편하다 ㅜㅜ) 쓰게 됐는데 왠걸...

모바일 화면에서 반응형 스킨이 먹힌 상태에서는 다음과 같이 이미지가 잘려나온다. 물론 터치하면 확대가 되지만, 3열 배열은 아예 3번째 사진은 코빼기도 볼 수가 없는 문제가 있다.

2. 코드

코드는 간단하다.

일단은 jQuery가 이미 삽입되어 있어야 한다.

이렇게 코드를 넣어주면 된다. 복사해서 넣으실 분들은 아래를 복사해서 넣으면 된다.

이미 코드가 들어가 있는 경우는 안 넣어줘도 된다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

두번째로는 글이 출력되는 div 창에 id값을 넣어주는 거다.

이미 아이디 값이 있다면 그 id 값을 기억하고 사용하면 된다.

나는 id="my_contents" 라고 넣어주었다.

다음으로는 아래 코드를 넣어주면 된다.

위의 코드가 실제로 적용해주는 코드다. 아래 내용을 복사해서 넣어주면 된다.

<script>

$(document).ready(function()    {

$("#my_contents table span.imageblock").each(function() {

var $this_table = $(this).parents("table");

var img_cnt = $(this).parents("table").find("span.imageblock").length;

var body_width = $("#my_contents").width();

var img_width = body_width / img_cnt;

$this_table.find("span.imageblock").css("width", img_width+"px");

});

});

</script>

3. 적용모습

적용모습이다. 이렇게 잘 나오도록 수정 완료. 그리고 사진을 클릭했을 때도 원래 기능이 잘 작동한다. 그리고 3개짜리 사진도 잘 적용된다.

그럼 바이