How to show images in modal windows

How it works

To make viewing images more convenient for users, you can set up opening images in modal windows via a custom HTML code. You may use an existing solution or write your own code.

How to get it

Using an existing solution

  1. Go to Publisher Account > Site Builder.
  2. Add the image to the needed block. Possible options are:
    • Description
    • Gallery
  3. Insert the following code to the Custom code block:

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. In the blocks parameter, specify the names of the CSS classes of the blocks to apply this modal window to. Use commas to separate the names. If there are several identical blocks in your site, these settings will be applied to all of them. Possible options are:
    • .block--description (the Description block)
    • .block--gallery (the Gallery block)
  2. Click Preview to see your changes.

Watch the tutorial video for this instruction:


Writing your own code

If you want to use your own code:

  1. Go to Publisher Account > Site Builder.
  2. Insert the code to the Custom code block.
  3. Click Preview to see your changes.

Was this article helpful?
Thank you!
Is there anything we can improve? Message
We're sorry to hear that
Please explain why this article wasn't helpful to you. Message
Thank you for your feedback!
We'll review your message and use it to help us improve your experience.

Continue reading