모달
아래의 예제들은 버튼 소스 코드에 .btn-e-block이 포함되어 있습니다. 버튼의 block 속성을 원치않으면 .btn-e-block을 지우고 사용하세요.
예제의 샘플을 작동해 보았다면, 새로고침 후 소스코드를 복사하여 사용하세요. (작동 후 불필요한 소스가 잔존하기 때문)
모달 기본
모달 크기
.modal-xs .modal-sm .modal-default .modal-lg .modal-xlg
모달 색상
.bg-light .bg-dark .bg-red .bg-blue .bg-green .bg-yellow .bg-purple .bg-brown .bg-orange .bg-indigo .bg-teal .bg-pink
모달 이벤트
경고창(sweetalert)
플러그인 호출
작업중인 파일 상단과 하단에 아래소스를 추가합니다.
<!--작업중인 파일 상단에 추가-->
<link rel="stylesheet" href="<?php echo EYOOM_THEME_URL; ?>/plugins/sweetalert/sweetalert.min.css">
<!--작업중인 파일 하단에 추가-->
<script src="<?php echo EYOOM_THEME_URL; ?>/plugins/sweetalert/sweetalert.min.js"></script>
라이트박스
플러그인 호출
작업중인 파일 상단과 하단에 아래소스를 추가합니다.
<!--작업중인 파일 상단에 추가-->
<link rel="stylesheet" href="<?php echo EYOOM_THEME_URL; ?>/plugins/magnific-popup/magnific-popup.min.css">
<!--작업중인 파일 하단에 추가-->
<script src="<?php echo EYOOM_THEME_URL; ?>/plugins/magnific-popup/magnific-popup.min.js"></script>
단일 이미지 라이트박스
세가지 유형의 크기 조절 설정
- 수직과 수평을 맞춤
- 수평만 맞춤
- 줌 애니메이션 효과, 화면 우측 상단으로 닫기 아이콘 위치 설정
라이트박스 갤러리
각 갤러리 항목에있는 HTML 콘텐츠를 넣어 콘텐츠 형식을 혼합 할 수 있습니다. 이 예에서 이미지의 로딩은 이동 방향에 따라 다음 이미지를 사용할 수 있습니다.
줌 효과 갤러리
아래의 예제들은 버튼 소스 코드에 .btn-e-block이 포함되어 있습니다. 버튼의 block 속성을 원치않으면 .btn-e-block을 지우고 사용하세요.
비디오 / 지도 / 폼
Modal
썸네일 오버레이
비디오 반응형
<div class="responsive-video">
YouTube iframe 동영상소스
</div>
<div class="responsive-video">
Vimeo iframe 동영상소스
</div>