Skip to menu

MH

내 사랑치 않고 끝내는 것 보다 사랑해서 잃어 버리는 편이 좋다.

It is better to have loved and lost than to have never loved at all.

Views 1055 Votes 0 Comment 1
?

Shortcut

PrevPrev Article

NextNext Article

Larger Font Smaller Font Up Down Print Attachment
?

Shortcut

PrevPrev Article

NextNext Article

Larger Font Smaller Font Up Down Print Attachment
Extra Form
원작자 80san
적용여부 적용
적용페이지 https://moonhouse.co.kr/lb
적용시점 버전 Rhymix 2.0.20

레이아웃 제작시 바탕배경으로 이미지를 적용시 배경 이미지들을 슬라이드로 출력하면서 기타 옵션들을 적용하는 방법입니다.

예전 부터 문하우스 레이아웃 스킨에 꾸준히 사용해 오던 방법인데 이번에 정리해 봅니다.  

 

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. 레이아웃 설정에서 "배경 슬라이더" 옵션들 설정

 

image.png.jpg

 

[ 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 이므로 마음껏 수정하셔도 됩니다.

 

    Tip이 도움이 되었다면 댓글과 평가 부탁합니다. Tip에 대한 궁금한 점은 댓글로 남겨 주시면 성심껏 답변 드립니다.
?

  1. NEW

    확장변수로 진행버턴과 D-day를 함께 출력

    마감일자가 있는 성격의 게시물 제목에 자동으로 상태(종료, 오늘종료, 진행중 등등 ) 반영하기 팁 D-day 계산 위의 두 팁을 합쳐서 확장변수로 진행버턴과 D-Day를 함께 출력하는 팁입니다. 게시판 스킨은 sketchbook5 입니다. 1. skin.xml 파일 수정 <var na...
    Date2023.03.22 Category :XE타운 Views0 원작자80san & 등등
    Read More
  2. 비밀글일때 제목글 감추는 방법

    비밀글로 작성된 문서의 경우 내용글은 보이질 않지만 제목의 경우는 출력이 되어서 완전한 비밀글로서의 기능을 가지질 못합니다. [게시판에 적용] 게시판스킨에서 해당 리스트 파일을 불러옵니다. 스케치북5 스킨 "첫 글만 썸네일 출력 웹진"인 경우 /module...
    Date2023.03.15 Category :XE타운 Views1 원작자sejin7940
    Read More
  3. 모바일 레이아웃에 통합 검색기능 적용하기

    검색버턴을 클릭하면 바로 하단에 토글로 검색바가 출력되게 적용하는 방법입니다. 1. 적용할 레이아웃의 적당한 위치에 "검색"버턴을 만듭니다. <button><a class="show_srch" id="show_srch" onclick="toggle('srch')">검색</a></button> 2. 하단에 통합검색...
    Date2023.01.26 Category :문하우스 Views12 원작자80san
    Read More
  4. Update

    라이믹스 CKEditor에 Spolier 플러그인 적용하기

    안녕하세요! 처음으로 팁 게시판에 글을남겨봅니다. 운영하고있는 사이트의 한 회원님께서 Spoiler관련 문의를주셔서 적용하려고 이것저것하다가 잘적용되어서 타운에 필요하신분이 있을까해서 공유해봅니다. 선 설명드리자면 에디터에 스포일러라는 툴바가 추...
    Date2023.01.15 Category :XE타운 Views25 원작자karius
    Read More
  5. Update

    관리자는 필수 확장변수 프리패스 (아이디어에서 '팁'으로 발전했습니다)

    앞서서 "관리자는 필수 확장변수를 입력하지 않아도 되는" 글을 아이디어 수준에서 남겨봤는데요. 관리자는 필수 확장변수 입력을 프리패스하기 위한 아이디어 코어를 수정하면 되는데 하지는 마세요 ㅎㅎㅎ if($val->is_required == 'Y') $js_code[] = sprint...
    Date2022.12.01 Category :XE타운 Views25 원작자윤삼
    Read More
  6. Update

    예약발행모듈 구버전 위젯에서 정상작동 되게 하기

    윤삼님의 예약발행모듈 을 적용하니 contact위젯에서는 정상적으로 작동을 하는데 구버전의 위젯에서는 비정상적으로 출력이 되어서 윤삼님이 주신 답변들로 팁을 납깁니다. 먼저 예약발행모듈 을 설치합니다. 예약발행 등록된 문서를 대기상태로 만들고, 정해...
    Date2022.11.30 Category :XE타운 Views20 원작자윤삼
    Read More
  7. 레이아웃 배경 슬라이드 적용법

    레이아웃 제작시 바탕배경으로 이미지를 적용시 배경 이미지들을 슬라이드로 출력하면서 기타 옵션들을 적용하는 방법입니다. 예전 부터 문하우스 레이아웃 스킨에 꾸준히 사용해 오던 방법인데 이번에 정리해 봅니다. 1. /layouts/Skin 이름/conf/info.xml 에...
    Date2022.06.14 Category :문하우스 Views1055 원작자80san
    Read More
  8. 다크모드를 구현해 보면서...

    다크모드가 대세인 요즘 레이아웃을 다크모드로 한번 꾸며 보고자 도전을 해 보았는데 이게 생각보다 쉽지를 않네요. 웹지기님의 팁 을 기초 삼아서 처음엔 mh_justice 레이아웃에 접목해 봤는데 justice 레이아웃이 선택 할 수 있는 칼라 선택의 조건이 너무 ...
    Date2022.04.29 Category :문하우스 Views822 원작자80san
    Read More
  9. 원댓글/대댓글 따로따로 애드온 && 적용방법

    - 게시판 문서 로드시에는 원댓글만 로드했다가, 대댓글은 별도의 링크를 통해 ajax로 따로 로드하는 애드온입니다. - 바로 실사용하기보다는, 충분한 테스트를 거쳐 버그 정보 및 개선 사항을 공유하고 함께 버전업을 한 뒤 실사용하시기를 권합니다. - 이런 ...
    Date2022.03.29 Category :XE타운 Views1026 원작자윤삼
    Read More
  10. 댓글 목록 중 원글 작성자일 경우 조건문을 적용하려고 합니다.

    비회원 댓글 작성이 가능한 게시판에서 원글 작성자가 댓글을 남길 경우 댓글 닉네임옆에 (글쓴이)라고 표시를 하려고 합니다. 공개된 팁을 댓글 관련 페이지 댓글 닉네임을 표시하는 부분에서 아래 소스 코드를 적용했습니다. <div class="ed comment-content...
    Date2022.03.25 Category :XE타운 Views875 원작자마트몬
    Read More
  11. table을 좌우 스크롤(수평 스크롤, 스와이프)할 때 특정 컬럼을 고정하고 싶다면

    앞선 팁에서 table을 div로 wrap해서 화면사이즈에 반응성을 높여주는 디자인을 소개했는데요. 사실 table을 스와이핑 또는 수평 스크롤하더라도 모바일 세로 화면에 컬럼 수(열)가 많다면 자신이 어떤 내용을 보고 있는지 파악하기 어려울 때가 많습니다. 그...
    Date2022.03.22 Category :XE타운 Views1445 원작자윤삼
    Read More
  12. 게시판 목록에서 카테고리/확장변수 바로 수정 애드온 and 모바일도 적용 방법

    XeTown에서 윤삼님이 만드신 게시판 목록에서 카테고리/확장변수 바로 수정 애드온 좀더 자세한 설정 방법과 SketchBook5 게시판스킨 - 문하우스 수정버전 에 적용하는 방법입니다. 1. https://xetown.com/download/1666779 에 접속해서 해당 에드온을 다운로...
    Date2022.03.18 Category :XE타운 Views503 원작자윤삼
    Read More
  13. 레이아웃에 언어선택 버턴을 설치하는 방법

    예전 XE 버전에서는 많은 레이아웃들에 언어를 선택할 수 있는 메뉴들이 있었는데 최근 라이믹스로 넘어오면서 이 기능이 거의 없어져 버렸습니다. 요번에 다국어 사이트 작업을 하면서 꼭 필요한 기능이라서 작업후 방법을 남깁니다. 먼저 사용중인 레이아웃...
    Date2022.01.08 Views136 원작자80san
    Read More
  14. 글작성시 특정 확장변수를 관리자만 체크할 수 있게 하는 방법

    글 작성 시나 수정 시 특정 확장 변수를 관리자만 보이고 수정할 수 있게 하는 방법입니다. [sketchbook5 게시판을 기준] /modules/board/skins/sketchbook5/write_form.html 아래 부분을 <table cond="count($extra_keys)" class="et_vars exForm bd_tb"> <ca...
    Date2022.01.04 Category :문하우스 Views92 원작자80san
    Read More
  15. mediafire.com 사이트를 자료 다운로드 링크로 이용하기

    https://moonhouse.co.kr/xetip/457183 위의 자료를 보면 구글 드라이브의 자료들을 사이트에 링크시키는 방법을 알려드렸는데 오늘은 mediafire.com 사이트에 자료를 올리고 링크시키는 방법을 알려드립니다. 먼저 https://www.mediafire.com 에 접속해서 회...
    Date2021.11.22 Category :문하우스 Views218 원작자80san
    Read More
  16. Rhymix 2.0.15 를 적용하니 게시판 글 작성시 확장변수란 문제 발생

    Rhymix 2.0.15 를 적용하고 나니 확장변수란에 문제가 생기네요. 확장변수 형식이 "한줄 입력칸(text)"으로 적용시 위의 이미지와 같이 칸의 넓이가 짧게 적용이 되고, URL, 이메일, 전화변호형식은 css가 적용이 되지를 않습니다. 아마 2.0.15 버전에서 아래...
    Date2021.11.05 Category :문하우스 Views50 원작자80san
    Read More
  17. 라이믹스 게시판스킨 시간대별 댓글 출력 방법

    SketchBook5 게시판스킨 - 문하우스 수정버전 을 작업하면서 댓글리스트 부분에 날짜 및 시간대별로 설정을 따로 출력하는 방법입니다. <td cond="$mi->display_regdate!='N'" class="date">{zdate($val->regdate, 'y.m.d')}</td> 위의 코드가 일반적으로 댓글...
    Date2021.09.05 Category :문하우스 Views139 원작자80san
    Read More
  18. Mh Appoint PopUp 위젯을 레이아웃에 적용하는 방법

    Mh Appoint PopUp 위젯 을 출력하고자 할때 위젯을 직접 입력할 수 있는 위젯페이지에서는 쉽게 팝업위젯을 띄울 수 있으나, 게시판이나 문서페이지등에서는 위젯을 입력하기가 쉽지 않습니다. 해당 레이아웃에 직접 위젯코드를 복사해서 붙여넣기를 하면 되나...
    Date2021.07.13 Category :문하우스 Views92 원작자80san
    Read More
  19. 타임라인 모듈을 이용하여 게시글별로 회원권한 따로 지정하는 방법

    구매게시판 을 만들다 보니 각 게시글별로 회원권한을 주는 방법이 만만치가 않아서 고심하다가 타임라인모듈 을 이용하여 권한이 다른 게시판을 하나의 게시글로 모아서 구현하는 방법을 선택했습니다. 1. 먼저 회원권한이 다른 게시판을 각각 생성합니다. 한...
    Date2021.07.07 Category :문하우스 Views127 원작자80san
    Read More
  20. 스케치북게시판에 스티커모듈 적용법 (라이믹스2.0 이상 전용)

    후하니님의 스티커모듈 을 evergreen님이 포크한 버전 을 문하우스에서 조금 수정해서 올립니다.(라이믹스 2.0 이상 전용) SketchBook5 게시판스킨 - 문하우스 수정버전 Pro ver. 1.8.3 (라이믹스전용) 상기 스케치북을 다운 받아서 설치하고 다운받은 스티커...
    Date2021.05.26 Category :XE타운 Views1828 원작자후하니
    Read More
List
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 16 Next
/ 16

Up
Category
"