diff --git a/Gemfile b/Gemfile index 1d5342c..3a7599b 100644 --- a/Gemfile +++ b/Gemfile @@ -4,6 +4,8 @@ source "https://rubygems.org" gem "jekyll-theme-chirpy", "~> 6.1" +gem 'jekyll-github-metadata', '~> 2.13.0' + group :test do gem "html-proofer", "~> 3.18" end diff --git a/_config.yml b/_config.yml index 0f74571..81cea77 100644 --- a/_config.yml +++ b/_config.yml @@ -13,39 +13,35 @@ baseurl: "" lang: en # Change to your timezone › http://www.timezoneconverter.com/cgi-bin/findzone/findzone -timezone: +timezone: America/New_York # jekyll-seo-tag settings › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md # ↓ -------------------------- -title: Chirpy # the main title +title: Trucaption # the main title -tagline: A text-focused Jekyll theme # it will display as the sub-title +tagline: Real-time captioning # it will display as the sub-title description: >- # used by seo meta and the atom feed - A minimal, responsive and feature-rich Jekyll theme for technical writing. + A real-time captioning system with support for large and small screen display. # fill in the protocol & hostname for your site, e.g., 'https://username.github.io' -url: "" +url: "https://www.trucaption.com/" github: - username: github_username # change to your github username - -twitter: - username: twitter_username # change to your twitter username + username: dkaser # change to your github username social: # Change to your full name. # It will be displayed as the default author of the posts and the copyright owner in the Footer - name: your_full_name - email: example@domain.com # change to your email address + name: Derek Kaser + email: derek@trucaption.com # change to your email address links: # The first element serves as the copyright owner's link - - https://twitter.com/username # change to your twitter homepage - - https://github.com/username # change to your github homepage + - https://github.com/dkaser # change to your github homepage # Uncomment below to add more social links # - https://www.facebook.com/username - # - https://www.linkedin.com/in/username + - https://www.linkedin.com/in/dkaser google_site_verification: # fill in to your verification string @@ -66,7 +62,7 @@ google_analytics: # light - Use the light color scheme # dark - Use the dark color scheme # -theme_mode: # [light|dark] +theme_mode: dark # The CDN endpoint for images. # Notice that once it is assigned, the CDN url @@ -76,7 +72,7 @@ theme_mode: # [light|dark] img_cdn: # the avatar on sidebar, support local or CORS resources -avatar: +avatar: "/assets/img/trucaption_logo.png" # boolean type, the global switch for TOC in posts. toc: true @@ -114,6 +110,11 @@ pwa: paginate: 10 +plugins: + - jekyll-github-metadata + +repository: dkaser/trucaption + # ------------ The following options are not recommended to be modified ------------------ kramdown: diff --git a/_data/contact.yml b/_data/contact.yml index 76b667a..86ffdd0 100644 --- a/_data/contact.yml +++ b/_data/contact.yml @@ -3,16 +3,10 @@ - type: github icon: "fab fa-github" -- type: twitter - icon: "fab fa-twitter" - - type: email icon: "fas fa-envelope" noblank: true # open link in current tab -- type: rss - icon: "fas fa-rss" - noblank: true # Uncomment and complete the url below to enable more contact options # # - type: mastodon diff --git a/_posts/.placeholder b/_posts/.placeholder deleted file mode 100644 index 8b13789..0000000 --- a/_posts/.placeholder +++ /dev/null @@ -1 +0,0 @@ - diff --git a/_posts/2023-08-21-azure.md b/_posts/2023-08-21-azure.md new file mode 100644 index 0000000..3f8375f --- /dev/null +++ b/_posts/2023-08-21-azure.md @@ -0,0 +1,38 @@ +--- +title: Using Azure Speech Services +author: derek +date: 2023-08-21 08:55:00 -0400 +categories: [Advanced] +tags: [advanced-configuration, azure] +permalink: /azure/ +--- + +## Configuration + +Trucaption can be configured to use Azure Speech Services instead of the built-in browser speech recognition. To use Azure Speech Services, you will need: + +- A [Microsoft Azure](https://azure.microsoft.com/en-us/products/ai-services/ai-speech) account +- An Azure Speech Service + +Once you have created a Speech Service in the Azure portal, obtain the region and a subscription key from the Overview page of the service (there will be two subscription keys, it doesn't matter which one you choose). Then, configure Trucaption to use Azure for transcription: + +1. Within the editor window, click Configure. +2. Set the transcription engine to "Azure". +3. Enter the *Location/Region* from the Azure portal as **Azure Region**. +4. Enter the subscription key from the Azure portal as **Azure Subscription Key** +5. **Azure Endpoint ID** should be left blank unless you are using Custom Speech. + +## Custom Speech + +Once your Azure speech account is configured, you can also choose to set up custom speech. This allows the engine to be trained to provide more accurate captions. + +To set up custom speech: + +1. Log in to the Azure [Speech Studio](https://speech.microsoft.com/). +2. Create a new project. +3. Train your custom model. ([Azure Docs](https://learn.microsoft.com/en-us/azure/ai-services/speech-service/how-to-custom-speech-train-model?pivots=speech-studio)) +4. Deploy a custom endpoint with your trained model. ([Azure Docs](https://learn.microsoft.com/en-us/azure/ai-services/speech-service/how-to-custom-speech-deploy-model?pivots=speech-studio)) +5. Obtain the *Resource Key* and *Endpoint ID* for your endpoint from Speech Studio. +6. Configure Trucaption to use your custom endpoint: + - Set **Azure Subscription Key** to the Resource Key for the endpoint. + - Set **Azure Endpoint ID** to the Endpoint ID. \ No newline at end of file diff --git a/_posts/2023-08-21-final-vs-interim.md b/_posts/2023-08-21-final-vs-interim.md new file mode 100644 index 0000000..1737d15 --- /dev/null +++ b/_posts/2023-08-21-final-vs-interim.md @@ -0,0 +1,20 @@ +--- +title: Understanding Final vs. Interim Transcripts +author: derek +date: 2023-08-21 08:55:00 -0400 +categories: [Advanced] +tags: [advanced-configuration] +permalink: /final-vs-interim/ +--- + +Real time transcription provides two different "qualities" of text which work together to provide the final text: interim and final transcripts. + +## Interim Transcriptions + +Interim transcripts are created rapidly, as the engine uses syllables, words, and small phrases to determine what was said. This allows transcripts to appear word-by-word as a speaker is speaking. However, this method is less accurate than the method used for final transcripts. + +In Trucaption, interim transcripts are displayed at the bottom of the transcript and cannot be edited. Interim transcripts are replaced with final transcripts as the final version becomes available. + +## Final Transcriptions + +Final transcripts are created when a speaker pauses. During final transcription, the engine uses the full phrases/sentences to generate a more accurate transcription than interim transcripts. Final transcripts alone are not generally suitable for real-time transcription since a significant delay occurs between when words are spoken and when the text becomes available. \ No newline at end of file diff --git a/_posts/2023-08-21-getting-started.md b/_posts/2023-08-21-getting-started.md new file mode 100644 index 0000000..f6a9de2 --- /dev/null +++ b/_posts/2023-08-21-getting-started.md @@ -0,0 +1,30 @@ +--- +title: Getting Started +author: derek +date: 2023-08-21 08:55:00 -0400 +categories: [Tutorial] +tags: [getting started] +pin: true +permalink: /getting-started/ +--- + +## Creating and Editing Captions + +Getting started with Trucaption is easy! Just download and run the application from the [Download](/download/) page on a computer connected to your audio source (microphone/sound board/etc.). + +Once Trucaption starts, your browser will open to the editor screen where you can start, stop, and edit the captions. If you are using a browser that supports built-in speech recognition, you don't need to do any configuration -- just click "Connect", then "Start Captions". + +Automatic captioning isn't perfect, and there will sometimes be errors in the generated text. In Trucaption, you can edit captions after they are generated to fix these errors. Just click the text you want to edit, make the desired changes, then press Enter or click elsewhere on the screen. The changes will be immediately sent to all viewers. If you want to cancel your changes, press Escape. + +## Viewing Captions + +If you click "Open Viewer" in the editor window, a dedicated viewing window will open. This is great for use on a large-screen display (e.g., using a projector or television connected to the computer running Trucaption). + +The viewer can also be opened across the network -- just go to http://your.trucaption.computer.address/ on another computer. If you want to make captions available via the internet, you'll probably need to set up either port forwarding or a reverse proxy like Cloudflare Tunnels. + +## Advanced Captioning + +By default, Trucaption uses the built-in speech recognition provided by your web browser to generate captions. If you would like to use an advanced transcription service, Trucaption can also be connected to either Azure Speech Services or Speechly: + +- [Azure Speech Services](/azure/) +- [Speechly](/speechly/) \ No newline at end of file diff --git a/_posts/2023-08-21-speechly.md b/_posts/2023-08-21-speechly.md new file mode 100644 index 0000000..a1efe9b --- /dev/null +++ b/_posts/2023-08-21-speechly.md @@ -0,0 +1,21 @@ +--- +title: Using Speechly +author: derek +date: 2023-08-21 08:55:00 -0400 +categories: [Advanced] +tags: [advanced-configuration, speechly] +permalink: /speechly/ +--- + +## Configuration + +Trucaption can be configured to use Speechly instead of the built-in browser speech recognition. To use Speechly, you will need: + +- A [Speechly](https://www.speechly.com/) account +- A Speechly application + +After creating your Speechly application, copy the *App ID* displayed in Speechly. Then, configure Trucaption to use Speechly for transcription: + +1. Within the editor window, click Configure. +2. Set the transcription engine to "Speechly". +3. Paste the Application ID in the "Speechly App" option. \ No newline at end of file diff --git a/_posts/2023-08-21-viewer.md b/_posts/2023-08-21-viewer.md new file mode 100644 index 0000000..033857a --- /dev/null +++ b/_posts/2023-08-21-viewer.md @@ -0,0 +1,27 @@ +--- +title: Customizing the Viewer +author: derek +date: 2023-08-21 08:55:00 -0400 +categories: [Advanced] +tags: [advanced-configuration] +permalink: /viewer/ +--- + +The viewer display can be customized if desired. By default, the viewer display includes a menu with an option to change the font size. This can be changed by adding settings to the viewer address: + + - **?fullscreen** will disable the menu + - **?size=NUM** will set the font size to NUM. + +Combining these options can be useful for large-screen displays. + +## Examples + +- http://*caption-host*/?fullscreen + - Disables the menu + - Uses default font size +- http://*caption-host*/?fullscreen&size=40 + - Disables the menu + - Sets font size to 40 +- http://*caption-host*/?size=40 + - Sets starting font size to 40 + - User can change font size using the menu diff --git a/_tabs/about.md b/_tabs/about.md deleted file mode 100644 index ddb2bc4..0000000 --- a/_tabs/about.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -# the default layout is 'page' -icon: fas fa-info-circle -order: 4 ---- - -> Add Markdown syntax content to file `_tabs/about.md`{: .filepath } and it will show up on this page. -{: .prompt-tip } diff --git a/_tabs/archives.md b/_tabs/archives.md deleted file mode 100644 index c3abc59..0000000 --- a/_tabs/archives.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -layout: archives -icon: fas fa-archive -order: 3 ---- diff --git a/_tabs/categories.md b/_tabs/categories.md deleted file mode 100644 index 2d241be..0000000 --- a/_tabs/categories.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -layout: categories -icon: fas fa-stream -order: 1 ---- diff --git a/_tabs/configuration.md b/_tabs/configuration.md new file mode 100644 index 0000000..aa42ba4 --- /dev/null +++ b/_tabs/configuration.md @@ -0,0 +1,20 @@ +--- +# the default layout is 'page' +icon: fas fa-gear +order: 5 +--- + +Trucaption settings can be modified via the "Configure" button in the editor window. + +## Transcription Settings + +- Transcription Engine + - Browser Native (free, uses built-in speech recognition, requries browser support) + - [Azure Speech Services](/azure/) (paid service) + - [Speechly](/speechly) (paid service) + +## App Settings + +- **Maximum Lines**: adjusts the number of lines that are displayed on the editor and viewer screens. This can be useful to improve performance when running Trucaption for a long time. Set to -1 to keep all lines in the window. +- **Default Font Size**: changes the default font size selected when the editor or viewer windows are opened. +- **Clear temporary transcript on stop**: When enabled, interim transcripts are erased when "Stop Listening" is pressed. When disabled, interim transcripts are converted to final transcripts and can then be edited. (For more information on final vs. interim transcripts, see [this article](/final-vs-interim/)). diff --git a/_tabs/download.md b/_tabs/download.md new file mode 100644 index 0000000..7be733b --- /dev/null +++ b/_tabs/download.md @@ -0,0 +1,17 @@ +--- +# the default layout is 'page' +icon: fas fa-download +order: 2 +--- + +## Trucaption {{ site.github.latest_release.name }} + +### Changes in this release: +{{ site.github.latest_release.body }} + +### Download links: +{% for asset in site.github.latest_release.assets %} + * [{{ asset.name}}]({{ asset.browser_download_url }}) +{% endfor %} + +For older releases, visit [Releases](https://github.com/dkaser/trucaption/releases). diff --git a/_tabs/features.md b/_tabs/features.md new file mode 100644 index 0000000..2fb351c --- /dev/null +++ b/_tabs/features.md @@ -0,0 +1,16 @@ +--- +# the default layout is 'page' +icon: fas fa-star +order: 3 +--- + +Trucaption is a Computer-Aided Real Time Transcription (CART) system designed for events. + +- Free captioning using built-in functionality on supported browsers. +- Advanced captioning via Azure Speech Services or Speechly. +- Real-time editing: an operator can make corrections to the automatically generated captions. +- Bad word filter +- Multiple viewing options: + - Via a second browser window on the computer running Trucaption + - Via a local network connection + - Via the internet (requires port forwarding/tunneling/etc.) \ No newline at end of file diff --git a/_tabs/screenshots.md b/_tabs/screenshots.md new file mode 100644 index 0000000..86e8f4c --- /dev/null +++ b/_tabs/screenshots.md @@ -0,0 +1,14 @@ +--- +# the default layout is 'page' +icon: fas fa-desktop +order: 4 +--- + +![Editor Window](/assets/img/screenshots/editor.png){: .shadow; width="350" } +_The editor window_ + +![Viewer Window](/assets/img/screenshots/viewer.png){: .shadow; width="350" } +_The viewer window_ + +![Configuration Panel](/assets/img/screenshots/config.png){: .shadow; width="200" } +_The configuration panel_ \ No newline at end of file diff --git a/_tabs/tags.md b/_tabs/tags.md deleted file mode 100644 index ded3adc..0000000 --- a/_tabs/tags.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -layout: tags -icon: fas fa-tags -order: 2 ---- diff --git a/assets/css/lightbox.css b/assets/css/lightbox.css new file mode 100644 index 0000000..e81a309 --- /dev/null +++ b/assets/css/lightbox.css @@ -0,0 +1,94 @@ +#lightbox {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.85); z-index: 9999999; line-height: 0; cursor: pointer; display: none;} +#lightbox .img { + position: relative; + top: 50%; + left: 50%; + -ms-transform: translateX(-50%) translateY(-50%); + -webkit-transform: translate(-50%,-50%); + transform: translate(-50%,-50%); + max-width: 100%; + max-height: 100%; +} +#lightbox .img img {opacity: 0; pointer-events: none; width: auto;} +@media screen and (min-width: 1200px) { + #lightbox .img { + max-width: 1200px; + } +} +@media screen and (min-height: 1200px) { + #lightbox .img { + max-height: 1200px; + } +} +#lightbox span {display: block; position: fixed; bottom: 13px; height: 1.5em; line-height: 1.4em; width: 100%; text-align: center; color: white; text-shadow: + -1px -1px 0 #000, + 1px -1px 0 #000, + -1px 1px 0 #000, + 1px 1px 0 #000; +} + +#lightbox span {display: none;} + +#lightbox .videoWrapperContainer { + position: relative; + top: 50%; + left: 50%; + -ms-transform: translateX(-50%) translateY(-50%); + -webkit-transform: translate(-50%,-50%); + transform: translate(-50%,-50%); + max-width: 900px; + max-height: 100%; +} +#lightbox .videoWrapperContainer .videoWrapper { + height: 0; + line-height: 0; + margin: 0; + padding: 0; + position: relative; + padding-bottom: 56.333%; /* custom */ + background: black; +} +#lightbox .videoWrapper iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; + display: block; +} +#lightbox #prev, #lightbox #next {height: 50px; line-height: 36px; display: none; margin-top: -25px; position: fixed; top: 50%; padding: 0 15px; cursor: pointer; text-decoration: none; z-index: 99; color: white; font-size: 60px;} +#lightbox.gallery #prev, #lightbox.gallery #next {display: block;} +#lightbox #prev {left: 0;} +#lightbox #next {right: 0;} +#lightbox #close {height: 50px; width: 50px; position: fixed; cursor: pointer; text-decoration: none; z-index: 99; right: 0; top: 0;} +#lightbox #close:after, #lightbox #close:before {position: absolute; margin-top: 22px; margin-left: 14px; content: ""; height: 3px; background: white; width: 23px; +-webkit-transform-origin: 50% 50%; +-moz-transform-origin: 50% 50%; +-o-transform-origin: 50% 50%; +transform-origin: 50% 50%; +/* Safari */ +-webkit-transform: rotate(-45deg); +/* Firefox */ +-moz-transform: rotate(-45deg); +/* IE */ +-ms-transform: rotate(-45deg); +/* Opera */ +-o-transform: rotate(-45deg); +} +#lightbox #close:after { +/* Safari */ +-webkit-transform: rotate(45deg); +/* Firefox */ +-moz-transform: rotate(45deg); +/* IE */ +-ms-transform: rotate(45deg); +/* Opera */ +-o-transform: rotate(45deg); +} +#lightbox, #lightbox * { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} \ No newline at end of file diff --git a/assets/img/.DS_Store b/assets/img/.DS_Store new file mode 100644 index 0000000..d780d6d Binary files /dev/null and b/assets/img/.DS_Store differ diff --git a/assets/img/favicons/.DS_Store b/assets/img/favicons/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/assets/img/favicons/.DS_Store differ diff --git a/assets/img/favicons/android-chrome-192x192.png b/assets/img/favicons/android-chrome-192x192.png new file mode 100644 index 0000000..d6d5e0b Binary files /dev/null and b/assets/img/favicons/android-chrome-192x192.png differ diff --git a/assets/img/favicons/android-chrome-384x384.png b/assets/img/favicons/android-chrome-384x384.png new file mode 100644 index 0000000..3a4c804 Binary files /dev/null and b/assets/img/favicons/android-chrome-384x384.png differ diff --git a/assets/img/favicons/apple-touch-icon.png b/assets/img/favicons/apple-touch-icon.png new file mode 100644 index 0000000..0162ca8 Binary files /dev/null and b/assets/img/favicons/apple-touch-icon.png differ diff --git a/assets/img/favicons/browserconfig.xml b/assets/img/favicons/browserconfig.xml new file mode 100644 index 0000000..a02a5c7 --- /dev/null +++ b/assets/img/favicons/browserconfig.xml @@ -0,0 +1,13 @@ +--- +layout: compress +--- + + + + + + + #da532c + + + diff --git a/assets/img/favicons/favicon-16x16.png b/assets/img/favicons/favicon-16x16.png new file mode 100644 index 0000000..9b07a80 Binary files /dev/null and b/assets/img/favicons/favicon-16x16.png differ diff --git a/assets/img/favicons/favicon-32x32.png b/assets/img/favicons/favicon-32x32.png new file mode 100644 index 0000000..84e312d Binary files /dev/null and b/assets/img/favicons/favicon-32x32.png differ diff --git a/assets/img/favicons/favicon.ico b/assets/img/favicons/favicon.ico new file mode 100644 index 0000000..bcc7217 Binary files /dev/null and b/assets/img/favicons/favicon.ico differ diff --git a/assets/img/favicons/mstile-150x150.png b/assets/img/favicons/mstile-150x150.png new file mode 100644 index 0000000..f252736 Binary files /dev/null and b/assets/img/favicons/mstile-150x150.png differ diff --git a/assets/img/favicons/site.webmanifest b/assets/img/favicons/site.webmanifest new file mode 100644 index 0000000..03c6113 --- /dev/null +++ b/assets/img/favicons/site.webmanifest @@ -0,0 +1,26 @@ +--- +layout: compress +--- + +{% assign favicon_path = "/assets/img/favicons" | relative_url %} + +{ + "name": "{{ site.title }}", + "short_name": "{{ site.title }}", + "description": "{{ site.description }}", + "icons": [ + { + "src": "{{ favicon_path }}/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "{{ favicon_path }}/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + }], + "start_url": "{{ '/index.html' | relative_url }}", + "theme_color": "#2a1e6b", + "background_color": "#ffffff", + "display": "fullscreen" +} diff --git a/assets/img/screenshots/config.png b/assets/img/screenshots/config.png new file mode 100644 index 0000000..1bed11e Binary files /dev/null and b/assets/img/screenshots/config.png differ diff --git a/assets/img/screenshots/editor.png b/assets/img/screenshots/editor.png new file mode 100644 index 0000000..3191950 Binary files /dev/null and b/assets/img/screenshots/editor.png differ diff --git a/assets/img/screenshots/viewer.png b/assets/img/screenshots/viewer.png new file mode 100644 index 0000000..7f0f461 Binary files /dev/null and b/assets/img/screenshots/viewer.png differ diff --git a/assets/img/trucaption_logo.png b/assets/img/trucaption_logo.png new file mode 100644 index 0000000..81c168f Binary files /dev/null and b/assets/img/trucaption_logo.png differ diff --git a/assets/js/lightbox.js b/assets/js/lightbox.js new file mode 100644 index 0000000..c42a289 --- /dev/null +++ b/assets/js/lightbox.js @@ -0,0 +1,141 @@ +function is_youtubelink(url) { + var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/; + return (url.match(p)) ? RegExp.$1 : false; +} +function is_imagelink(url) { + var p = /([a-z\-_0-9\/\:\.]*\.(jpg|jpeg|png|gif))/i; + return (url.match(p)) ? true : false; +} +function is_vimeolink(url,el) { + var id = false; + var xmlhttp = new XMLHttpRequest(); + xmlhttp.onreadystatechange = function() { + if (xmlhttp.readyState == XMLHttpRequest.DONE) { // XMLHttpRequest.DONE == 4 + if (xmlhttp.status == 200) { + var response = JSON.parse(xmlhttp.responseText); + id = response.video_id; + console.log(id); + el.classList.add('lightbox-vimeo'); + el.setAttribute('data-id',id); + + el.addEventListener("click", function(event) { + event.preventDefault(); + document.getElementById('lightbox').innerHTML = '
'; + document.getElementById('lightbox').style.display = 'block'; + + setGallery(this); + }); + } + else if (xmlhttp.status == 400) { + alert('There was an error 400'); + } + else { + alert('something else other than 200 was returned'); + } + } + }; + xmlhttp.open("GET", 'https://vimeo.com/api/oembed.json?url='+url, true); + xmlhttp.send(); +} +function setGallery(el) { + var elements = document.body.querySelectorAll(".gallery"); + elements.forEach(element => { + element.classList.remove('gallery'); + }); + if(el.closest('ul, p')) { + var link_elements = el.closest('ul, p').querySelectorAll("a[class*='lightbox-']"); + link_elements.forEach(link_element => { + link_element.classList.remove('current'); + }); + link_elements.forEach(link_element => { + if(el.getAttribute('href') == link_element.getAttribute('href')) { + link_element.classList.add('current'); + } + }); + if(link_elements.length>1) { + document.getElementById('lightbox').classList.add('gallery'); + link_elements.forEach(link_element => { + link_element.classList.add('gallery'); + }); + } + var currentkey; + var gallery_elements = document.querySelectorAll('a.gallery'); + Object.keys(gallery_elements).forEach(function (k) { + if(gallery_elements[k].classList.contains('current')) currentkey = k; + }); + if(currentkey==(gallery_elements.length-1)) var nextkey = 0; + else var nextkey = parseInt(currentkey)+1; + if(currentkey==0) var prevkey = parseInt(gallery_elements.length-1); + else var prevkey = parseInt(currentkey)-1; + document.getElementById('next').addEventListener("click", function() { + gallery_elements[nextkey].click(); + }); + document.getElementById('prev').addEventListener("click", function() { + gallery_elements[prevkey].click(); + }); + } +} + +document.addEventListener("DOMContentLoaded", function() { + + //create lightbox div in the footer + var newdiv = document.createElement("div"); + newdiv.setAttribute('id',"lightbox"); + document.body.appendChild(newdiv); + + //add classes to links to be able to initiate lightboxes + var elements = document.querySelectorAll('a'); + elements.forEach(element => { + var url = element.getAttribute('href'); + if(url) { + if(url.indexOf('vimeo') !== -1 && !element.classList.contains('no-lightbox')) { + is_vimeolink(url,element); + } + if(is_youtubelink(url) && !element.classList.contains('no-lightbox')) { + element.classList.add('lightbox-youtube'); + element.setAttribute('data-id',is_youtubelink(url)); + } + if(is_imagelink(url) && !element.classList.contains('no-lightbox')) { + element.classList.add('lightbox-image'); + var href = element.getAttribute('href'); + var filename = href.split('/').pop(); + var split = filename.split("."); + var name = split[0]; + element.setAttribute('title',name); + } + } + }); + + //remove the clicked lightbox + document.getElementById('lightbox').addEventListener("click", function(event) { + if(event.target.id != 'next' && event.target.id != 'prev'){ + this.innerHTML = ''; + document.getElementById('lightbox').style.display = 'none'; + } + }); + + //add the youtube lightbox on click + var elements = document.querySelectorAll('a.lightbox-youtube'); + elements.forEach(element => { + element.addEventListener("click", function(event) { + event.preventDefault(); + document.getElementById('lightbox').innerHTML = '
'; + document.getElementById('lightbox').style.display = 'block'; + + setGallery(this); + }); + }); + + //add the image lightbox on click + var elements = document.querySelectorAll('a.lightbox-image'); + elements.forEach(element => { + element.addEventListener("click", function(event) { + event.preventDefault(); + document.getElementById('lightbox').innerHTML = '
'+this.getAttribute('title')+'
'+this.getAttribute('title')+''; + document.getElementById('lightbox').style.display = 'block'; + + setGallery(this); + }); + }); + +}); \ No newline at end of file