diff --git a/_config.yml b/_config.yml index 659e9699e7cf..7a09e6aa1d30 100644 --- a/_config.yml +++ b/_config.yml @@ -537,6 +537,14 @@ third_party_libraries: js: "https://cdn.jsdelivr.net/npm/leaflet@{{version}}/dist/leaflet.min.js" js_map: "https://cdn.jsdelivr.net/npm/leaflet@{{version}}/dist/leaflet.js.map" version: "1.9.4" + lightbox2: + integrity: + css: "sha256-uypRbsAiJcFInM/ndyI/JHpzNe6DtUNXaWEUWEPfMGo=" + js: "sha256-A6jI5V9s1JznkWwsBaRK8kSeXLgIqQfxfnvdDOZEURY=" + url: + css: "https://cdn.jsdelivr.net/npm/lightbox2@{{version}}/dist/css/lightbox.min.css" + js: "https://cdn.jsdelivr.net/npm/lightbox2@{{version}}/dist/js/lightbox.min.js" + version: "2.11.5" mathjax: integrity: js: "sha256-MASABpB4tYktI2Oitl4t+78w/lyA+D7b/s9GEP0JOGI=" @@ -576,6 +584,19 @@ third_party_libraries: url: js: "https://cdn.jsdelivr.net/npm/mermaid@{{version}}/dist/mermaid.min.js" version: "10.7.0" + photoswipe: + integrity: + js: "sha256-VCBpdxvrNNxGHNuTdNqK9kPFkev2XY7DYzHdmgaB69Q=" + url: + css: "https://cdn.jsdelivr.net/npm/photoswipe@{{version}}/dist/photoswipe.min.css" + js: "https://cdn.jsdelivr.net/npm/photoswipe@{{version}}/dist/photoswipe.esm.min.js" + version: "5.4.4" + photoswipe-lightbox: + integrity: + js: "sha256-uCw4VgT5DMdwgtjhvU9e98nT2mLZXcw/8WkaTrDd3RI=" + url: + js: "https://cdn.jsdelivr.net/npm/photoswipe@{{version}}/dist/photoswipe-lightbox.esm.min.js" + version: "5.4.4" polyfill: url: js: "https://cdnjs.cloudflare.com/polyfill/v{{version}}/polyfill.min.js?features=es6" @@ -588,6 +609,13 @@ third_party_libraries: css: "https://cdn.jsdelivr.net/npm/pseudocode@{{version}}/build/pseudocode.min.css" js: "https://cdn.jsdelivr.net/npm/pseudocode@{{version}}/build/pseudocode.min.js" version: "2.4.1" + spotlight: + integrity: + css: "sha256-Dsvkx8BU8ntk9Iv+4sCkgHRynYSQQFP6gJfBN5STFLY=" + url: + css: "https://cdn.jsdelivr.net/npm/spotlight.js@{{version}}/dist/css/spotlight.min.css" + js: "https://cdn.jsdelivr.net/npm/spotlight.js@{{version}}/dist/spotlight.bundle.min.js" + version: "0.7.8" swiper: integrity: css: "sha256-yUoNxsvX+Vo8Trj3lZ/Y5ZBf8HlBFsB6Xwm7rH75/9E=" @@ -628,6 +656,14 @@ third_party_libraries: js: "https://cdn.jsdelivr.net/npm/vega-lite@{{version}}/build/vega-lite.min.js" js_map: "https://cdn.jsdelivr.net/npm/vega-lite@{{version}}/build/vega-lite.min.js.map" version: "5.16.3" + venobox: + integrity: + css: "sha256-ohJEB0/WsBOdBD+gQO/MGfyJSbTUI8OOLbQGdkxD6Cg=" + js: "sha256-LsGXHsHMMmTcz3KqTaWvLv6ome+7pRiic2LPnzTfiSo=" + url: + css: "https://cdn.jsdelivr.net/npm/venobox@{{version}}/dist/venobox.min.css" + js: "https://cdn.jsdelivr.net/npm/venobox@{{version}}/dist/venobox.min.js" + version: "2.1.8" # ----------------------------------------------------------------------------- # Get external JSON data diff --git a/_includes/head.liquid b/_includes/head.liquid index b4f32b06ecce..609f8fbe2323 100644 --- a/_includes/head.liquid +++ b/_includes/head.liquid @@ -132,6 +132,25 @@ crossorigin="anonymous" > {% endif %} + + {% if page.images.lightbox2 %} + + {% endif %} + + {% if page.images.photoswipe %} + + {% endif %} {% if page.images.slider %} {% endif %} + + {% if page.images.spotlight %} + + {% endif %} + + {% if page.images.venobox %} + + {% endif %} {% endif %} {% if page.tikzjax %} diff --git a/_includes/scripts/imageLayouts.liquid b/_includes/scripts/imageLayouts.liquid index 4bdef5fd130b..fb5475e8360b 100644 --- a/_includes/scripts/imageLayouts.liquid +++ b/_includes/scripts/imageLayouts.liquid @@ -7,6 +7,26 @@ crossorigin="anonymous" > {% endif %} + {% if page.images.lightbox2 %} + + {% endif %} + {% if page.images.photoswipe %} + + {% endif %} {% if page.images.slider %} {% endif %} + {% if page.images.spotlight %} + + {% endif %} + {% if page.images.venobox %} + + + {% endif %} {% endif %} diff --git a/_posts/2024-12-04-photo-gallery.md b/_posts/2024-12-04-photo-gallery.md new file mode 100644 index 000000000000..e28eb73f4c59 --- /dev/null +++ b/_posts/2024-12-04-photo-gallery.md @@ -0,0 +1,97 @@ +--- +layout: post +title: a post with image galleries +date: 2024-12-04 01:59:00 +description: this is what included image galleries could look like +tags: formatting images +categories: sample-posts +thumbnail: assets/img/9.jpg +images: + lightbox2: true + photoswipe: true + spotlight: true + venobox: true +--- + +The images in this post are all zoomable, arranged into different mini-galleries using different libraries. + +## [Lightbox2](https://lokeshdhakar.com/projects/lightbox2/) + + + + + +--- + +## [PhotoSwipe](https://photoswipe.com/) + + + +--- + +## [Spotlight JS](https://nextapps-de.github.io/spotlight/) + + +
+ + + + + + + + + +
+ +
+ + + + + + + + + +
+ +--- + +## [Venobox](https://veno.es/venobox/) + + + +