Open timnilson opened 1 year ago
Same question here, we need to use the video plugin... Did you found a solution @timnilson?
@adrienlamotte No, I never got that working.
Add video and thumbnails to the importmap.rb
:
pin "stimulus-lightbox", to: "https://ga.jspm.io/npm:stimulus-lightbox@3.2.0/dist/stimulus-lightbox.mjs"
pin "lightgallery", to: "https://ga.jspm.io/npm:lightgallery@2.7.1/lightgallery.es5.js"
pin "lg-video", to: "https://ga.jspm.io/npm:lightgallery@2.7.1/plugins/video/lg-video.es5.js"
pin "lg-thumbnail", to: "https://ga.jspm.io/npm:lightgallery@2.7.1/plugins/thumbnail/lg-thumbnail.es5.js"
pin "lg-zoom", to: "https://ga.jspm.io/npm:lightgallery@2.7.1/plugins/zoom/lg-zoom.es5.js"
Override controller and default options:
import Lightbox from 'stimulus-lightbox'
import lgVideo from 'lg-video'
import lgThumbnail from 'lg-thumbnail'
import lgZoom from 'lg-zoom'
export default class extends Lightbox {
connect() {
super.connect()
}
get defaultOptions() {
return {
controls: true,
loop: true,
plugins: [lgZoom, lgVideo, lgThumbnail]
}
}
}
Add styles (I don't know how to add them when using tailwindcss-rails
):
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.1/css/lightgallery.min.css" integrity="sha512-F2E+YYE1gkt0T5TVajAslgDfTEUQKtlu4ralVq78ViNxhKXQLrgQLLie8u1tVdG2vWnB3ute4hcdbiBtvJQh0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.1/css/lg-video.min.css" integrity="sha512-89gDQOHnYjji90NPJ7+M5tgA/0E+fjL4KuSFhi6tjH6sZ54yUEogPMmOAgbI599fW1CtCyrsJbch8k/QzuoXzw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.1/css/lg-zoom.min.css" integrity="sha512-vIrTyLijDDcUJrQGs1jduUCSVa3+A2DaWpVfNyj4lmXkqURVQJ8LL62nebC388QV3P4yFBSt/ViDX8LRW0U6uw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.1/css/lg-thumbnail.min.css" integrity="sha512-GRxDpj/bx6/I4y6h2LE5rbGaqRcbTu4dYhaTewlS8Nh9hm/akYprvOTZD7GR+FRCALiKfe8u1gjvWEEGEtoR6g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
Don't forget to use overriden controller filename instead of lightbox
.
You're done.
I've tried to extend the stimulus component to load the needed lightgalleryjs video plugin to show YouTube videos. However, I can't get that working. Could you add an example in the documentation on how to do this? Thank you! Love your work Guillaume!