웹마스터 팁
본문내 이미지 조절 애드온 기능 확장 - 원본이미지 모달 제거 / 작은이미지 크게 확장하기
2012.11.25 16:00
출처 : http://sejin7940.co.kr/index.php?mid=xe_tips&document_srl=71290
----------------------------------------------------
XE에 기본적으로 깔려있는 애드온 중에 '본문내 이미지 조절 애드온' 가 있습니다.
크게 두가지 기능을 하는애드온이죠
1) 가로 사이즈가 큰 이미지를 게시판 폭에 맞게 줄여주는 기능과
2) 별도의 링크가 안 걸려있는이미지의 경우 이미지 클릭시 모달창으로 원본 이미지가 크게 뜨게 하는 기능
이 있죠..
이 애드온이 설정에서 옵션화 되어있으면 더 좋을텐데, 실제로 옵션화가 안 되어있다보니
둘중에 하나만 쓰고 싶거나, 반대로 하고픈 경우 할 수가 없죠. (제가 옵션화 해서 배포해도 되겠지만... 아.. 귀찮아서 ㅡㅡ;;)
그런데 수정법이 정말 간단하기에 적어드리겠습니다. 의외로 유용하게 쓰실 분들이 계실듯..
1. 이미지 클릭시 모달로 원본 이미지가 뜨는 기능을 없애고프면...
( 자동축소는 원하는데 이 기능은 안 쓰고 싶어하는 경우가 제법될 겁니다. 특히 페이지 모듈 사용시...)
addons/resize_image/js/resize_image.min.js 에서
9번째 줄 끝쪽에 있는 $img.css('cursor', 'pointer').click(slideshow); 를 지워주시면 됩니다.
2. 큰 이미지는 작게 줄어드는데,
작은 이미지는 사이즈에 맞게 늘어날 수 있게 하면 좋지 않을까 생각해볼 수도 있죠
(물론 작은게 커지면 이미지가 깨져 보기 싫긴하겠지만, 상황에 따라 또 이걸원하는 경우가 있을 수도 있겠죠)
addons/resize_image/js/resize_image.min.js 에서
8번째 줄 제일 앞에 있는 if(beforSize.width<=contentWidth)return; 를 지워주시면 됩니다.
(130111 추가내용 - sejin7940)
2번에 적은 작은 이미지 늘어나게 하는 기능의 경우, 모바일에서도 작동하게 하려면...
addons/resize_image/css/resize_image.mobile.css 에서
.xe_content img{max-width:100%;height:auto !important; min-width:100%;} 이렇게
끝에 min-width:100%; 라는 문구를 추가해주면 됩니다.
댓글 2
-
KANTSOFT
2012.11.26 11:35
-
Jaurim
2013.01.23 15:26
유용한 팁이네요. 근데, 혹시 이 addon 사용시 본문내 이미지나 미디어 삽입을 자동으로 특정 사이즈로, 특정위치로 삽입이 가능할까요?
즉, 예를 들어서,
본문 사이즈 width = 100% / height =100% 라 하고,
-----------------------------------------------------------------------------------------------
왼쪽에 글 (50%) / 오른쪽에 이미지혹은 media link (50%) --> 높이를 30%
-----------------------------------------------------------------------------------------------
글 ~~~~ (width = 100% / height =70% )
-----------------------------------------------------------------------------------------------
이런식으로 될까요? 글을 블로그 식으로 올릴때, 오른쪽이나 왼쪽에 참조 이미지나 동영상 게시하고, 글로 채우고, 이런식으로요...
그렇게 해서, 여러개의 게시판스킨을 만들어서 (하나 게시판을 여러개 복사해서,) 조금 재미있게 구성짜고 해볼려구요 ^^
제목 | 글쓴이 | 날짜 |
---|---|---|
[생초보팁] 서브메뉴 배경이미지 활용하기
[4]
![]() | 에혀라X | 2010.11.24 |
개인 홈페이지에서 아주 손쉽게 배경음악을 깔아놓는 법 [5] | 지녁 | 2010.11.25 |
텍스타일 (Textyle) 에서 첨부파일 용량 제한 늘리는 방법. [1] | sejin7940 | 2010.11.27 |
게시물 하단에 예쁜 추천,비추천 아이콘 버튼 추가하기~
[12]
![]() | xemall | 2010.11.28 |
최근문서 or 콘텐츠 위젯 공지글 뽑아오기 [8] | Xiso | 2010.11.29 |
[생초보팁] 페이지 내용 줄간격 css | 에혀라X | 2010.11.30 |
호스팅비 돈아낍시다. 하나의 XE 다중 도메인 사용하기. [10] | kimnada | 2010.12.02 |
[생초보팁] 회원가입시 홈페이지 블로그주소 않나타내기 ㅋ [4] | 에혀라X | 2010.12.05 |
새로운 채팅 서비스 웹톡!
[3]
![]() | 명랑폐인™ | 2010.12.06 |
어느게시판이든 모두 적용이 가능한 그림판입니다.^^ [1] | web | 2010.12.07 |
ftp나 mysql 암호 변경시 일어나는 ''db 접속시 에러' XE | 샷타이거 | 2010.12.08 |
플래시로 만들어진 글자 타이핑보고 만들었어요. | web | 2010.12.09 |
사이트 모니터링 알리미에요...^^
[3]
![]() | web | 2010.12.10 |
[생초보팁] 페이지(page) 줄간격과 부분 웹폰트 | 에혀라X | 2010.12.11 |
[생초보팁] 웹진최근게시물 요약글 링크걸기
[1]
![]() | 에혀라X | 2010.12.12 |
[생초보팁] 레이아웃 수정시 HTML 넣는 칸 넓히기 -_- | 에혀라X | 2010.12.12 |
메인화면에 설문조사 위젯(?) 만들기
[3]
![]() | 3D매니아 | 2010.12.14 |
1.4.2.3 에서 1.4.3 이상 버전으로 업그레이드 시 백지화면 해결팁 [4] | 2년후 | 2010.12.15 |
외부페이지를 레이아웃에 결합시 상단 마진폭이 벌어지는 문제 해결방법
[6]
![]() | DuRi | 2010.12.17 |
심플한 XML 플래시 이미지 갤러리
[7]
![]() | maxtabby | 2010.12.21 |
2번째 팁이 유용하네여... 컨텐츠부분 사이즈 맞춰서 이미지 업로드 해야 이뻐 보이는데.. 컨텐츠가 넓은 레이아웃을 쓰면 막상 보기가.... 좀 난해하더군요..
2번째 팁과 몇가지 기능추가해서 배포.... 안해주실껀가요?ㅎㅎ