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 add your own code.
How to get it
Using an existing solution
- Open your project in Publisher Account.
- In the side bar click Site Builder.
- Click Open Site Builder.
- Add the image to the needed block. Possible options are:
- Description
- Gallery
- Insert the following code to the Custom code block:
Copy
- html
<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>
- In the
blocksparameter, 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)
- Click Preview to see your changes.
Watch the tutorial video for this instruction:
Adding your own code
- In the Builder, click Add block and choose Custom code.
- Insert your own code to the block.
Was this article helpful?
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.Useful links
Last updated: March 26, 2024Found a typo or other text error? Select the text and press Ctrl+Enter.
