Lightbox

이윰빌더에서 사용하는 시즌3 Lightbox의 ShortCodes 입니다.

소스코드는 해당 예제에 마우스 포인트를 갖다대면 버튼이 나타나며, 클릭하면 소스코드를 볼 수 있습니다.

플러그인 호출

작업중인 파일 상단과 하단에 아래소스를 추가합니다. magnific-popup.min.css 스타일시트와 magnific-popup.min.js 스크립트 상대경로는 작업중인 파일경로에 맞게 수정이 필요할수 있습니다.


<!--작업중인 파일 상단에 추가-->
<link rel="stylesheet" href="../../../plugins/magnific-popup/magnific-popup.min.css">

<!--작업중인 파일 하단에 추가-->
<script src="../../../plugins/magnific-popup/magnific-popup.min.js"></script>

보통 위 상대경로가 맞지 않으면 아래 상대경로일 가능성이 큽니다.

  • ../plugins/magnific-popup/magnific-popup.min.css
  • ../plugins/magnific-popup/magnific-popup.min.js

단일 이미지 라이트박스

세가지 유형의 크기 조절 설정

  1. 수직과 수평을 맞춤
  2. 수평만 맞춤
  3. 줌 애니메이션 효과, 화면 우측 상단으로 닫기 아이콘 위치 설정

라이트박스 갤러리

각 갤러리 항목에있는 HTML 콘텐츠를 넣어 콘텐츠 형식을 혼합 할 수 있습니다. 이 예에서 이미지의 로딩은 이동 방향에 따라 다음 이미지를 사용할 수 있습니다.

줌 효과 갤러리

아래의 예제들은 버튼 소스 코드에 .btn-e-block이 포함되어 있습니다. 버튼의 block 속성을 원치않으면 .btn-e-block을 지우고 사용하세요.

비디오 / 지도 / 폼

YouTube 비디오
Vimeo 비디오
Google 지도
폼 열기

Form

라이트 박스는 자동으로 첫 번째 입력에 초점을 맞출 수있는 옵션이 있습니다.


Modal

Modal 열기

Modal 대화

이 예제는 사용자의 선택이나 액션(클릭)으로 창을 닫게 만들수 있습니다.

닫기

Error

이미지 요청 실패
Ajax 요청 실패

Thumbnail overlay

이윰빌더에서 사용하는 시즌3 Thumbnail overlay의 ShortCodes 입니다.

소스코드는 해당 예제에 마우스 포인트를 갖다대면 버튼이 나타나며, 클릭하면 소스코드를 볼 수 있습니다.

Video responsive

이윰빌더에서 사용하는 시즌3 Video responsive의 ShortCodes 입니다.

소스코드는 해당 예제에 마우스 포인트를 갖다대면 버튼이 나타나며, 클릭하면 소스코드를 볼 수 있습니다.


<div class="responsive-video">
    YouTube iframe 동영상소스
</div>

<div class="responsive-video">
    Vimeo iframe 동영상소스
</div>