라이트박스

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

플러그인 호출

작업중인 파일 상단과 하단에 아래소스를 추가합니다. 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 요청 실패

썸네일 오버레이

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

비디오 반응형

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

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