모달 윈도우에서 이미지 열기

작동 방식

사용자에게 이미지를 보다 편하게 보여주기 위하여 모달 윈도우에서 이미지 열기를 설정할 수 있습니다.

사용자

웹사이트 빌더와 이미 통합한 파트너.

획득 방법

  1. 게시자 계정 > 웹사이트 빌더로 이동.
  2. 필요한 블록에 이미지 추가. 사용 가능 옵션:
    • 설명
    • 갤러리
  3. 다음 코드를 사용자 정의 코드 블록에 삽입합니다:

Copy
Full screen
Small screen
<script>
(function () {
  var blocks = ['.block--description', '.block--gallery'];

  var style = document.createElement('link');
  style.rel = 'stylesheet';
  style.href = 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css';
  document.getElementsByTagName('head')[0].appendChild(style);

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js';
  script.addEventListener('load', function () {
    var fancyBoxClass = 'image-fancybox';
    blocks.forEach(function (block) {
      $(block)
        .find('[data-bg]')
        .toArray()
        .forEach(function (element) {
          var url = element.getAttribute('data-bg')
            .replace('url(', '')
            .replace(')', '')
            .replace('"', '')
            .trim();
          if (url === '') {
            return;
          }
          $(element)
            .parent()
            .wrap('<a style="width: 100%; height: 100%;" class="' + fancyBoxClass + '" href="' + url + '"></a>');
        });
    });

    $('.' + fancyBoxClass)
      .fancybox();
  }, false);
  document.getElementsByTagName('body')[0].appendChild(script);
})();
</script>

  1. blocks 매개변수에서, 이 모달 윈도우를 적용할 블록의 CSS 클래스 이름을 지정합니다. 쉼표를 사용하여 이름을 구분하세요. 사이트에 같은 블록이 여러 개 있는 경우, 이 설정은 그 모두에 적용됩니다. 사용 가능 옵션:
    • .block--description (설명 블록)
    • .block--gallery (갤러리 블록)
  2. 미리보기를 클릭하면 변경 사항을 볼 수 있습니다.

이 레시피에 대한 예제 비디오 보기: