Contents

<div x-data="{ open: false }">
    <a @click="open = true" title="View large image">
        <figure class="image {{ include.ratio | default: is-16by9 }}">
            <img src="{{ include.link | absolute_url }}" alt="{{ include.alt }}">
        </figure>
    </a>
    <div class="modal" :class="{ 'is-active': open }">
        <div class="modal-background" @click="open = false"></div>
        <div class="modal-content">
            {% if include.large_link %}
                <img src="{{ include.large_link | absolute_url }}" alt="{{ include.alt }}">
            {% else %}
                <img src="{{ include.link | absolute_url }}" alt="{{ include.alt }}">
            {% endif %}
        </div>
        <button class="modal-close is-large" aria-label="close" @click="{ open = false }"></button>
    </div>
</div>

Version data entries

3 entries across 3 versions & 1 rubygems

Version	Path
jekyll-theme-opentoolbox-2.0.2	_includes/image-modal.html
jekyll-theme-opentoolbox-2.0.1	_includes/image-modal.html
jekyll-theme-opentoolbox-2.0.0	_includes/image-modal.html