모달 창에서 이미지 표시 방법

작동 방식

사용자가 이미지를 더 편리하게 보게 하려면 사용자 지정 HTML 코드를 통해 모달 창에서 이미 열기를 설정할 수 있습니다. 기존 솔루션 또는 자체 코드를 추가할 수 있습니다.

획득 방법

기존 솔루션 사용

  1. 관리자 페이지에서 프로젝트를 엽니다.
  2. 사이드 바에서 웹사이트 빌더를 클릭합니다.
  3. 웹사이트 빌더 열기를 클릭합니다.
  4. 필요한 블록에 이미지를 추가합니다. 사용할 수 있는 옵션:
    • 설명
    • 갤러리
  5. 다음 코드를 사용자 정의 코드 블록에 삽입합니다:
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. 미리보기를 클릭하면 변경 사항을 볼 수 있습니다.

이 지침에 대한 튜토리얼 동영상 시청:


자체 코드 추가

  1. 빌더에서 블록 추가를 클릭하고 사용자 지정 코드를 선택합니다.
  1. 자체 코드를 블록에 삽입합니다.
이 기사가 도움이 되었나요?
감사합니다!
개선해야 할 점이 있을까요? 메시지
유감입니다
이 기사가 도움이 안 된 이유를 설명해 주세요. 메시지
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.

유용한 링크

마지막 업데이트: 2024년 3월 26일

오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누르세요.

문제 보고
콘텐츠를 항상 검토합니다. 여러분의 피드백은 콘텐츠를 개선에 도움이 됩니다.
후속 조치를 위해 이메일을 제공해 주세요
의견을 보내 주셔서 감사드립니다!