Washington National Cathedral Component Library

Lightbox 

<div class="lightbox_wrapper">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="lightbox_inner">
                <a class="lightbox_link js-lightbox" href="https://www.youtube.com/watch?v=FamEme8LTq0" data-url="https://www.youtube.com/watch?v=FamEme8LTq0" data-mobile-url="https://www.youtube.com/watch?v=FamEme8LTq0" data-crop="wide" data-title="The Virginia Mae Center: A New Cathedral Home" data-lightbox-group="test-group" data-lightbox-caption="Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.">

                    <img class="lightbox_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x740/1 740w, https://images.fastspot.com/washington-national-cathedral/500x500/1 500w, https://images.fastspot.com/washington-national-cathedral/300x300/1 300w" src="https://images.fastspot.com/washington-national-cathedral/300x300/1" alt="" loading="lazy" width="300" height="300">
                </a>
                <a class="lightbox_link js-lightbox" href="https://www.youtube.com/watch?v=SmR6umOrft8" data-url="https://www.youtube.com/watch?v=SmR6umOrft8" data-mobile-url="https://www.youtube.com/watch?v=SmR6umOrft8" data-crop="classic" data-title="" data-lightbox-group="test-group">

                    <img class="lightbox_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x740/2 740w, https://images.fastspot.com/washington-national-cathedral/500x500/2 500w, https://images.fastspot.com/washington-national-cathedral/300x300/2 300w" src="https://images.fastspot.com/washington-national-cathedral/300x300/2" alt="" loading="lazy" width="300" height="300">
                </a>
                <a class="lightbox_link js-lightbox" href="https://www.youtube.com/watch?v=qsv4AA1WRwo" data-url="https://www.youtube.com/watch?v=qsv4AA1WRwo" data-mobile-url="https://www.youtube.com/watch?v=qsv4AA1WRwo" data-crop="portrait" data-title="Porta Egestas" data-lightbox-group="test-group" data-lightbox-caption="Maecenas sed diam eget risus varius blandit sit amet non magna.">

                    <img class="lightbox_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x740/3 740w, https://images.fastspot.com/washington-national-cathedral/500x500/3 500w, https://images.fastspot.com/washington-national-cathedral/300x300/3 300w" src="https://images.fastspot.com/washington-national-cathedral/300x300/3" alt="" loading="lazy" width="300" height="300">
                </a>
            </div>
        </div>
    </div>
</div>
 
<div class="lightbox_wrapper">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="lightbox_inner">
				{% for item in items %}
				{% if item.video %}
					{% set href = item.video %}
					{% set mobile_url = item.video %}
				{% else %}
					{% set href = "https://images.fastspot.com/washington-national-cathedral/" ~ item.size.width ~ 'x' ~ item.size.height ~ '/' ~ item.image %}
					{% set mobile_url = "https://images.fastspot.com/washington-national-cathedral/" ~ item.size_mobile.width ~ 'x' ~ item.size_mobile.height ~ '/' ~ item.image %}
				{% endif %}
				<a class="lightbox_link js-lightbox" href="{{ href }}" data-url="{{ href }}" data-mobile-url="{{ mobile_url }}" data-crop="{{ item.crop }}" data-title="{{ item.title }}" data-lightbox-group="{{ group }}"{% if item.caption %} data-lightbox-caption="{{ item.caption }}"{% endif %}>
					{% include '@partial-image' with {
						class: 'lightbox',
						alt: '',
						image: item.image,
						loading: 'lazy',
						sources: [
							img.square.sml,
							img.square.xsml,
							img.square.xxsml
						]
					} %}
				</a>
				{% endfor %}
			</div>
		</div>
	</div>
</div>

No notes defined.