diff options
| author | Hsieh Chin Fan <typebrook@gmail.com> | 2022-02-02 13:34:47 +0800 |
|---|---|---|
| committer | Hsieh Chin Fan <pham@topo.tw> | 2024-11-30 21:09:29 +0800 |
| commit | 9934dd538b0ce116e3b1600272cb46369b082246 (patch) | |
| tree | 2f28c6c362201151eaf8218e566479ed7eb72070 /nginx/layout/gal.xslt | |
init commit
Diffstat (limited to 'nginx/layout/gal.xslt')
| -rw-r--r-- | nginx/layout/gal.xslt | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/nginx/layout/gal.xslt b/nginx/layout/gal.xslt new file mode 100644 index 0000000..fadcc37 --- /dev/null +++ b/nginx/layout/gal.xslt | |||
| @@ -0,0 +1,67 @@ | |||
| 1 | <?xml version="1.0" encoding="UTF-8"?> | ||
| 2 | <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> | ||
| 3 | <xsl:output method="html" encoding="utf-8" indent="yes" /> | ||
| 4 | <xsl:template match="/"> | ||
| 5 | <xsl:text disable-output-escaping='yes'><!DOCTYPE html></xsl:text> | ||
| 6 | <html> | ||
| 7 | <head> | ||
| 8 | <title><xsl:value-of select="$title" /></title> | ||
| 9 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| 10 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" integrity="sha256-Vzbj7sDDS/woiFS3uNKo8eIuni59rjyNGtXfstRzStA=" crossorigin="anonymous"/> | ||
| 11 | <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> | ||
| 12 | <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" integrity="sha256-yt2kYMy0w8AbtF89WXb2P1rfjcP/HTHLT7097U8Y5b8=" crossorigin="anonymous"></script> | ||
| 13 | <script src="https://cdn.jsdelivr.net/npm/jszip@3.1.5/dist/jszip.min.js" integrity="sha256-PZ/OvdXxEW1u3nuTAUCSjd4lyaoJ3UJpv/X11x2Gi5c=" crossorigin="anonymous"></script> | ||
| 14 | <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js" integrity="sha256-xoh0y6ov0WULfXcLMoaA6nZfszdgI8w2CEJ/3k8NBIE=" crossorigin="anonymous"></script> | ||
| 15 | <style>img { display: block; }</style> | ||
| 16 | </head> | ||
| 17 | <body> | ||
| 18 | <h1 style="text-align: center;"><xsl:value-of select="$title"/></h1> | ||
| 19 | <div style="border-bottom: 1px solid gray; margin-bottom: 1rem;"></div> | ||
| 20 | <div style="display: flex; flex-wrap: wrap; gap: 2px; justify-content: center;"> | ||
| 21 | <xsl:for-each select="list/file"> | ||
| 22 | <xsl:sort order="descending"/> | ||
| 23 | <a href="{.}" data-fancybox="gallery"> | ||
| 24 | <img loading="lazy" src="{.}!lg" height="200"/> | ||
| 25 | </a> | ||
| 26 | </xsl:for-each> | ||
| 27 | </div> | ||
| 28 | <script> | ||
| 29 | async function downloadAll() { | ||
| 30 | const zip = JSZip(); | ||
| 31 | const folder = zip.folder('<xsl:value-of select="$title" />'); | ||
| 32 | const files = [ | ||
| 33 | <xsl:for-each select="list/file"> | ||
| 34 | <xsl:value-of select="." /> | ||
| 35 | </xsl:for-each> | ||
| 36 | ]; | ||
| 37 | for(const i in files) { | ||
| 38 | const file = files[i]; | ||
| 39 | const resp = await fetch(file); | ||
| 40 | folder.file(file, resp.blob()); | ||
| 41 | $.fancybox.animate($.fancybox.getInstance().SlideShow.$progress.show(),{scaleX: i/files.length}, 0.1); | ||
| 42 | } | ||
| 43 | const zipFile = await zip.generateAsync({type: 'blob'}); | ||
| 44 | saveAs(zipFile, '<xsl:value-of select="$title" />' + '.zip'); | ||
| 45 | $.fancybox.animate($.fancybox.getInstance().SlideShow.$progress.show(),{scaleX: 0}, 0.1); | ||
| 46 | } | ||
| 47 | |||
| 48 | $('[data-fancybox="gallery"]').fancybox({ | ||
| 49 | buttons: [ | ||
| 50 | "thumbs", | ||
| 51 | "slideShow", | ||
| 52 | "fullScreen", | ||
| 53 | "downloadAll", | ||
| 54 | "close" | ||
| 55 | ], | ||
| 56 | btnTpl: { | ||
| 57 | downloadAll: | ||
| 58 | '<a class="fancybox-button fancybox-button--download" title="Download All" href="javascript:downloadAll()">' + | ||
| 59 | '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3M3 17V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" style="fill:unset; stroke-width:2"/></svg>' + | ||
| 60 | '</a>', | ||
| 61 | } | ||
| 62 | }); | ||
| 63 | </script> | ||
| 64 | </body> | ||
| 65 | </html> | ||
| 66 | </xsl:template> | ||
| 67 | </xsl:stylesheet> | ||