Created
May 6, 2023 06:07
-
-
Save stijn-dejongh/89271a4ebf101f19cf9ccdbeb7c7754c to your computer and use it in GitHub Desktop.
Simple shell script, generating a browser based image caroussel using galleria.js. To be used as a basis for terminal based picture management.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #! /bin/bash | |
| if [ ! -d "$1" ]; then | |
| echo "usage: $0 <directory>"; | |
| exit 1; | |
| fi | |
| echo '' > "$1_viewer.html" | |
| cat >> "$1_viewer.html" <<'EOF' | |
| <html> | |
| <head> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/galleria/1.6.1/galleria.min.js"></script> | |
| <style> | |
| body { background: #000000 } | |
| .galleria{ width: 100%; height: 100%; background: #000 } | |
| .galleria-info-title{ font-size: 1.25rem !important } | |
| .galleria-errors{ display: none !important } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="galleria"> | |
| EOF | |
| for file in "$1"/*; do | |
| echo "<img src=\"$1/$(basename "$file")\" rel=\"$1/$(basename "$file")\" alt=\"$1/$(basename "$file")\" />" >> "$1_viewer.html" | |
| done | |
| cat >> "$1_viewer.html" <<'EOF' | |
| </div> | |
| <script> | |
| (function() { | |
| Galleria.loadTheme('https://cdnjs.cloudflare.com/ajax/libs/galleria/1.6.1/themes/classic/galleria.classic.min.js'); | |
| Galleria.configure({ | |
| transition: 'fade', | |
| imageCrop: false, | |
| showInfo: true, | |
| debug: false, | |
| autoplay: 8000, | |
| popupLinks: true, | |
| carouselSteps: 5 | |
| }); | |
| Galleria.run('.galleria', { | |
| dataConfig: function(img) { | |
| // img is now the image element | |
| // the function should return an object with the new data | |
| return { | |
| title: $(img).attr('rel'), // sets title to image filename | |
| description: $(img).attr('alt') // sets description to image filename | |
| }; | |
| }}); | |
| }()); | |
| </script> | |
| </body> | |
| </html> | |
| EOF |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment