최근에 XE로 작업한 사이트가 갤러리 사이트였는데


갤러리 사이트니까 당연히 보여지는 이미지가 중요해서


XE에 내장된 이미지 슬라이더를 좀 변형해서 작업을 했습니다.


xe_image_gallery_customized.zip



백문이 불여일견... 깔아서 이미지 슬라이더를 써 보시면 압니다.


/[본인의 xe 경로]/modules/editor/components/ 에 덮어쓰시면 적용됩니다.




* 기본(적용 이전)





* 적용된 것(적용 이후)





동일한 이미지로 준비하지 못하여 죄송합니다.


이거 적용한다고 멀쩡하게 지금 서비스되고 있는 사이트에 잘못 덮어씌웠다가 고객님들 화내십니다(...)


local로도 작업은 하지만 그 작업본은 회사에 있고 집에는 없습니다.


그렇다고 이 포스팅을 위해 xe를 집에 새로 깔 수도 없는 노릇이라;;;






* 커스터마이징 적용 포인트




1. 미리보기 이미지 위치가 위 -> 아래로 바뀌고 사이즈가 조금 커짐. 비율도 1:1에서 4:3으로 바뀜.


당연히 갤러리 사이트니까 미리보기 이미지가 기존보다 좀 더 커지고, 이미지를 좀 더 잘 보여주기를 원했습니다.


또한 갤러리 사이트는 대체적으로 가로이미지를 많이 사용한다더군요. 그래서 비율을 변경하게 되었습니다.




2. 화살표가 사이즈가 커지고 모양도 바뀜, 위치도 바뀜


기존의 화살표 모양은 클릭하기에 너무 작아서 불편하다는 이야기가 당연히 나올 만했습니다.


적용 이전 캡쳐만 봐도 불편할 거 같이 생기지 않았나요...


그래서 커스터마이징해서 바꾸게 되었으며, 핵심은 이것입니다.


class 네이밍이 slide_gallery_placeholder 인 div 태그 안에 화살표를 바로 넣으시면 안됩니다.


그러면 slide가 동작할 때마다 화살표가 사라져 버립니다. -_-


그렇기 때문에 위의 소스코드를 받아보시면 금방 알 수 있는 사실이지만,


해당 div를 감싸는 slide_gallery_placeholder_wrap class를 가진 div를 따로 만들어서,


그 div에 position:relative CSS 속성을 부여하고, slide_gallery_placeholder_wrap 의 하위 태그로


화살표를 삽입하여 position:absolute CSS 속성을 부여해야


정상적으로 화살표의 위치가 이미지의 세로 중간에 붙습니다.




3. 이미지 네이밍을 미리볼 수 있게 되었음 ( 임시 이미지를 올렸으므로 캡쳐에는 그 부분이 확실히 나타나지 않으나, 추후에 사용자가 이미지 네이밍을 바꾸면 자동 적용됨. )


이미지의 원래 이름을 미리볼 수 있게 하는 기능입니다.


이게 동작하는 원리는 간단하면서도 한편으로는 꽤 복잡합니다.


여기에 관여하는 js 파일이 2개(slide_gallery.js 수정, ysedit_showimagetitle.js 생성)이고, 


js로만 동작하는 게 아니라 html, css와 맞물려서 돌아가는 구조이기 때문입니다.


일단 그 부분을 보여주는 장소는 html 파일에서 다음 부분입니다.


<ul class="slide_gallery_placeholder_title">

<li loop="$oDocument->getUploadedFiles()=>$key,$file">

{$file->source_filename}

</li>

</ul>


하지만 다음 소스코드로 loop를 돌리면 당연히, 모든 파일의 이미지 네이밍이 죄다 튀어나오겠죠.


그걸 방지하는 소스코드가 들어간 게 slide_gallery.js를 약간 수정한 것과, css 부분입니다.


일단 죄다 튀어나오게 list로 loop를 돌린 다음, 순서에 따라서 제어한다는 게 핵심입니다.


slide_gallery.js의 다음 부분이 선택한 이미지 네이밍에 active class를 주고 선택하지 않은 이미지에는 class를 삭제하도록 동작합니다.


// 선택된 부분만 보이게 하기

$(".slide_gallery_placeholder_title li:eq("+(idx)+")").addClass("active").siblings().removeClass("active");


(혹시 못찾을까봐 주석을 달아 놨으니 금방 찾으실 수 있습니다.)


또한 slide_gallery.css에는 다음과 같은 부분이 있습니다.


.slide_gallery_placeholder_title li{

display:none;

}

.slide_gallery_placeholder_title li.active{

display:block;

font-size:13px;

text-align:center;

line-height:20px;

}


여기서 핵심이 되는 부분은 당연히 display:none 과 display:block 이죠.


active 클래스가 부여된 리스트만 눈에 보여지게 하는 역할을 합니다.


또한 ysedit_showimagetitle.js는 자동으로 붙는 확장자를 자르는 역할을 합니다.






솔직히 정말 간단한 수정본이고 방법만 알면 정말 쉽습니다.


이 파일은 추후에 github로 소스코드를 열어놓겠습니다.


저도 오픈소스 활동을 좀 해야될까 봐요...





댓글을 달아 주세요

티스토리 툴바