레이아웃 제작시 바탕배경으로 이미지를 적용시 배경 이미지들을 슬라이드로 출력하면서 기타 옵션들을 적용하는 방법입니다.
예전 부터 문하우스 레이아웃 스킨에 꾸준히 사용해 오던 방법인데 이번에 정리해 봅니다.
1. /layouts/Skin 이름/conf/info.xml 에 아래 코드 추가
<group>
<title xml:lang="ko">배경 슬라이더</title>
<var name="bgimg_slide" type="select">
<title xml:lang="ko">배경이미지 슬라이더</title>
<description xml:lang="ko">배경이미지 슬라이드 선택.</description>
<options value="">
<title xml:lang="ko">출력안함</title>
</options>
<options value="Y">
<title xml:lang="ko">출력</title>
</options>
</var>
<var name="slide_interval" type="text">
<title xml:lang="ko">슬라이딩 시간 간격</title>
<description xml:lang="ko">슬라이드 이미지간의 시간 간격(기본 5000(5초))</description>
</var>
<var name="slide_transition" type="select">
<title xml:lang="ko">슬라이딩 전개방식</title>
<description xml:lang="ko">슬라이딩의 전개방식을 선택해 주세요.(기본 Fade)</description>
<options value="1">
<title xml:lang="ko">Fade</title>
</options>
<options value="2">
<title xml:lang="ko">Slide Top</title>
</options>
<options value="3">
<title xml:lang="ko">Slide Right</title>
</options>
<options value="4">
<title xml:lang="ko">Slide Bottom</title>
</options>
<options value="5">
<title xml:lang="ko">Slide Left</title>
</options>
<options value="6">
<title xml:lang="ko">Carousel Right</title>
</options>
<options value="7">
<title xml:lang="ko">Carousel Left</title>
</options>
<options value="0">
<title xml:lang="ko">None</title>
</options>
</var>
<var name="transition_speed" type="text">
<title xml:lang="ko">전개방식 시간</title>
<description xml:lang="ko">슬라이딩 전개방식의 시간(기본 2000(2초))</description>
</var>
<var name="slide_content" type="select">
<title xml:lang="ko">슬라이더 출력형태</title>
<description xml:lang="ko">슬라이더의 출력형태를 선택</description>
<options value="1">
<title xml:lang="ko">기본</title>
</options>
<options value="2">
<title xml:lang="ko">썸네일</title>
</options>
</var>
<var name="s_img_loc" type="select">
<title xml:lang="ko">슬라이더 화면출력</title>
<description xml:lang="ko">슬라이더 화면 출력을 선택</description>
<options value="fixed">
<title xml:lang="ko">화면고정</title>
</options>
<options value="absolute">
<title xml:lang="ko">이미지고정</title>
</options>
</var>
<var name="s_img_top" type="text">
<title xml:lang="ko">이미지의 상단 높이</title>
<description xml:lang="ko">이미지의 상단 높이를 지정, 뭔밍?은 기본^.^(기본 0)</description>
</var>
<var name="s_img_left" type="text">
<title xml:lang="ko">이미지의 좌측 간격</title>
<description xml:lang="ko">이미지의 좌측 간격을 지정, 뭔밍?은 기본^.^(기본 0)</description>
</var>
<var name="s_img_b" type="text">
<title xml:lang="ko">슬라이딩 배경 칼라</title>
<description xml:lang="ko">슬라이딩 배경영역의 색상을 지정(기본 #fff)</description>
</var>
<var name="slider1_image" type="image">
<title xml:lang="ko">이미지1</title>
</var>
<var name="slider1_description_en" type="text">
<title xml:lang="ko">이미지1 영문</title>
</var>
<var name="slider1_description_kr" type="text">
<title xml:lang="ko">이미지1 한글</title>
</var>
<var name="slider2_image" type="image">
<title xml:lang="ko">이미지2</title>
</var>
<var name="slider2_description_en" type="text">
<title xml:lang="ko">이미지2 영문</title>
</var>
<var name="slider2_description_kr" type="text">
<title xml:lang="ko">이미지2 한글</title>
</var>
<var name="slider3_image" type="image">
<title xml:lang="ko">이미지3</title>
</var>
<var name="slider3_description_en" type="text">
<title xml:lang="ko">이미지3 영문</title>
</var>
<var name="slider3_description_kr" type="text">
<title xml:lang="ko">이미지3 한글</title>
</var>
<var name="slider4_image" type="image">
<title xml:lang="ko">이미지4</title>
</var>
<var name="slider4_description_en" type="text">
<title xml:lang="ko">이미지4 영문</title>
</var>
<var name="slider4_description_kr" type="text">
<title xml:lang="ko">이미지4 한글</title>
</var>
</group>
2. /layouts/Skin 이름/layout.html 에 코드 추가
{@ $li = $layout_info; }
<!-- 배경슬라이드 --> <block cond="$li->bgimg_slide == 'Y'"><include target="bgslide.html" /></block>
3. 첨부파일을 내려 받아 압축을 풀어서 해당 스킨에 업로드
4. 레이아웃 설정에서 "배경 슬라이더" 옵션들 설정
[ Tip! ]
1. 이미지 숫자 추가하는 법
info.xml 과 bgslide.html 파일안에 slider_image 부분들을 추가
2. 이미지 영문 / 한글 (이미지 caption) 부분 수정
/css/supersized.shutter.css 의 18줄 ~ 20줄 부분이 이미지의 캡션 부분 css입니다.
칼라, 크기, 투명도, 에니메이션을 수정하면 됩니다.
bgslide.html 의 79줄(웹) 83줄(모바일)은 캡션영역의 위치입니다.
3. 참고로 supersized 소스 코드는 라이선스가 MIT License / GPL License 이므로 마음껏 수정하셔도 됩니다.
모바일 레이아웃에 통합 검색기능 적용하기
Colorbox 사용법 2탄
Tip이 도움이 되었다면 댓글과 평가 부탁합니다.
Tip에 대한 궁금한 점은 댓글로 남겨 주시면 성심껏 답변 드립니다. 
