이윰
모달 & 라이트박스
본 페이지의 테마코드 활용법은 2022년 01월 이후 선보인 이윰빌더 시즌4 부트스트랩5 기반의 테마코드 활용법입니다.
이전 이윰빌더 시즌4 부트스트랩3 기반의 테마코드 활용법은 아래 링크를 참조하여 주시기 바랍니다.
https://eyoom.net/page/eb4_code
Modal
아래의 예제들은 버튼 소스 코드에 .btn-e-block이 포함되어 있습니다. 버튼의 block 속성을 원치않으면 .btn-e-block을 지우고 사용하세요.
예제의 샘플을 작동해 보았다면, 새로고침 후 소스코드를 복사하여 사용하세요. (작동 후 불필요한 소스가 잔존하기 때문)
모달 기본
모달 스크롤 & 수직 중앙
.modal-dialog-scrollable
.modal-dialog-centered
.modal-dialog-centered .modal-dialog-scrollable
모달 크기
.modal-xl
.modal-lg
.modal-sm
모달 색상
.modal-gray
.modal-dark
.modal-crimson
.modal-indigo
.modal-teal
.modal-purple
그외 다른 색상으로 적용이 가능합니다. .modal-red, .modal-blue, .modal-green ... 등
Sweetalert2
플러그인 호출
작업중인 파일 상단과 하단에 아래소스를 추가합니다.
<!--작업중인 파일 상단에 추가-->
<link rel="stylesheet" href="<?php echo EYOOM_THEME_URL; ?>/plugins/sweetalert2/sweetalert2.min.css">
<!--작업중인 파일 하단에 추가-->
<script src="<?php echo EYOOM_THEME_URL; ?>/plugins/sweetalert2/sweetalert2.min.js"></script>
그외 예제는 아래 링크를 참조하시기 바랍니다.
https://sweetalert2.github.io/
Lightbox
플러그인 호출
작업중인 파일 상단과 하단에 아래소스를 추가합니다.
<!--작업중인 파일 상단에 추가-->
<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
Tumbnail Overlay
Responsive Video
<div class="responsive-video">
YouTube iframe 동영상소스
</div>
<div class="responsive-video">
Vimeo iframe 동영상소스
</div>