-
Re: Video in Lightbox
Thanks very much for this, Siran. It's fantastic!
Two questions arise for me, though:
- How can I change the size, font and text colour of the caption?
- Can I get the code that sits behind each image, so that I can insert it into a carousel? I'm using Slick Carousel to present a series of thumbnails for videos, so I need to put the lightbox code into that.
A third question is how you made the widget - it's really cool!
Thanks again for your help.
-
Re: Video in Lightbox
Ray, I'm not very good at explaining, but I'll try...
First there is a grouped text "UsesJQuery" that has a name (same as the text) applied. This just tells Xara that our document requires the jQuery library and Xara then includes it for us.
Then there are two other text groups "lightbox.min.css" and "lightbox.min.js". These have the files with the same name (which were taken from the referenced website) attached. Xara automatically includes these into our page for us, so we don't need to worry. (But Xara only does this for .css and .js files!)
Additionally there is some code at the page options tab on the HTML code (head).
This code is the starting point. It installs a document ready function (a function that is automatically executed after the full HTML has been loaded) that searches the page for the elements that have the name "htmlclass=youtubelightboxitem" or "htmlclass=vimeolightboxitem" applied (these are written as class="youtubelightboxitem" and class="vimeolightboxitem" attributes to the HTML when Xara exports your page).
For each element it finds it invokes the plugin code after adding some data attributes to them. (In this special case it doesn't use the element itself but it's parent, that is because Xara adds the class attribute to the image and not the link itself.)
In the given example the video id is taken from the link address, and the video site is implicitly defined by the name applied to the element.
Remember this is just an example. If you want to use a plain image instead of a button, then you would have to put the video id elsewhere, for example at the image alt text. But keep in mind to change the code, because then the element Xara writes the class attribute to would have to be used to invoke the plugin on (and not the parent).
-
Re: Video in Lightbox
Gary, you can add some CSS to you page head. To turn it red for example (this is specific to the widget version):
Code:
<style>.slvj-lightbox h1{color:red;}</style>
Not sure if it is possible to integrate a widget in to a slick slider. How do you set it up? Is it possible to add data attributes and classes to the images? It might be easier to stick with the first example and just to adapt the code to allow to take the caption from another data attribute.
-
2 Attachment(s)
Re: Video in Lightbox
Was still playing with it and wanted to share the result. In this widget you can style almost everything it.
There is also an example file that quickly describes how to change the font.
-
Re: Video in Lightbox
siran, I think Gary is after the marrying up of the WTag:text:<variable> items that you name and hand over in an array to all embedded Xara code behind the scenes.
I have always assumed you have taken a prior internal widget Xara file and stripped out all the control page and added back your variables.
Acorn
-
Re: Video in Lightbox
Thank you all for your continued input into this. I really appreciate it and value this community. I'm away from my desk today, but when I'm back, I'll post up a Xara WD file with my slider in it, so you can see how it works. It's not a widget (because I don't know how to make them!), but is inserted as an HTML placeholder.
-
1 Attachment(s)
Re: Video in Lightbox
Hi Siran,
As promised yesterday, I've uploaded an example site that shows the Slick Carousel that I've embedded into my Xara WD file. You can find my sample site here.
You'll see in the sample site that each of the pictures in the carousel links to a BBC webpage. What I actually want to do is to have the images link to YouTube videos played in lightboxes, like you've created for us in this thread.
If you can help me combine your lightbox code with this carousel, I'll be really grateful. Ideally, I'd like to add the hover effects you had on the thumbnails in your example, so that a play icon appears on each thumbnail, on hover.
In case it's useful, here's the Xara Web Designer file for the sample site: Attachment 122048
Cheers,
Gary
-
1 Attachment(s)
Re: Video in Lightbox
Hi Gary, Acorn will explain this better when he returns but meanwhile firstly separate the Head & Body sections. The Head section and Body section shouldn't be mixed. Then look at the url (links) in the body section and change them into YOUR required links:
-
1 Attachment(s)
Re: Video in Lightbox
Well spotted, Egg. I'd just pasted the HTML I developed in a separate file into the Placeholder in Xara WD, without separating the <head> and <body> elements. Although it worked fine, I agree with you that it's not correct, so I've fixed that in the file here: Attachment 122054.
I've also republished the demo site to www.wood-net.co.uk/xwd/carousellightbox
Now I just need Siran or Acorn to see if we can integrate the Lightbox code into the Carousel, so that when clicked the videos will open in Lightboxes...
-
1 Attachment(s)
Re: Video in Lightbox
First thing you should try is to add the functionality of the first example and see if it works together at all. You will notice that when you try to drag the slider it will immediately open the lightbox.
If you want to go that route despite of that effect please ask if you need help at adding mouse over effects or customizing the lightbox.