pages/_includes/scripts/imageLayouts.liquid
George f23e35e043
New image components (image galleries) (#2877)
Added support for multiple image galleries, and created a sample post
showing how to enable and use them.

---------

Signed-off-by: George Araújo <george.gcac@gmail.com>
2024-12-10 19:01:01 -03:00

61 lines
1.8 KiB
Plaintext

{% if page.images %}
{% if page.images.compare %}
<script
defer
src="{{ site.third_party_libraries.img-comparison-slider.url.js }}"
integrity="{{ site.third_party_libraries.img-comparison-slider.integrity.js }}"
crossorigin="anonymous"
></script>
{% endif %}
{% if page.images.lightbox2 %}
<script
defer
src="{{ site.third_party_libraries.lightbox2.url.js }}"
integrity="{{ site.third_party_libraries.lightbox2.integrity.js }}"
crossorigin="anonymous"
></script>
{% endif %}
{% if page.images.photoswipe %}
<script type="module">
import PhotoSwipeLightbox from '{{ site.third_party_libraries.photoswipe-lightbox.url.js }}';
import PhotoSwipe from '{{ site.third_party_libraries.photoswipe.url.js }}';
const photoswipe = new PhotoSwipeLightbox({
gallery: '.pswp-gallery',
children: 'a',
pswpModule: PhotoSwipe,
});
photoswipe.init();
</script>
{% endif %}
{% if page.images.slider %}
<script
defer
src="{{ site.third_party_libraries.swiper.url.js }}"
integrity="{{ site.third_party_libraries.swiper.integrity.js }}"
crossorigin="anonymous"
></script>
{% endif %}
{% if page.images.spotlight %}
<script
defer
src="{{ site.third_party_libraries.spotlight.url.js }}"
crossorigin="anonymous"
></script>
{% endif %}
{% if page.images.venobox %}
<script
defer
src="{{ site.third_party_libraries.venobox.url.js }}"
integrity="{{ site.third_party_libraries.venobox.integrity.js }}"
crossorigin="anonymous"
></script>
<script>
document.addEventListener('readystatechange', () => {
if (document.readyState === 'complete') {
new VenoBox();
}
});
</script>
{% endif %}
{% endif %}