Video in Lightbox

[garycwood84]

Thanks, Siran. I'll have a look at this when I'm back at my desk. If it's not possible for us to create a widget that wraps the lightboxes into the Slick carousel, is it possible to do it manually by coding it? At the moment, that's how I'm inserting the Slick carousel, so I'm happy for it to work that way if necessary.

[siran]

Have been able to add a mouse over button (and some code to prevent opening the box after dragging) to a previous example. But not to pause the slider while the box is open or to add a caption without changing the code.
Will try to integrate that into the widget, but this will take a while.

[siran]

Finished the widget now. Please see an example with multiple variants HERE.
Notice the changed caption on the variants.
Still the slider keeps scrolling while the lightbox is open. Maybe Acorn knows a trick?
Added some options. Didn't test all the options though...
Have fun...

[siran]

Hi Gary,
not sure if you're still interested in this stuff. But suddenly the pause function works for the slider and I wanted to share the extended widget...
Added some options to control the pausing and an option to close the lightbox on a variant switch. Now the slider always pauses while the variant it is placed on is invisible.
See very simple example HERE.

[garycwood84]

Siran,

Thank you so much again for all your work on this, and my sincere apologies for the delay in getting back to you: I got swamped with other work activity, and so have only just managed to get back to this.

The example in your post from 11 September is exactly what I need, so now I just need to integrate this into my site, and add my images and links, and I should be good to go.

I just have a couple of questions, to help me do that:

1. In your latest post, there are two files (widget_multivideolb_v2.xar and multi_var_pause.xar). I know that the first one is the one I need to drag into my document, but I'm not sure what to do with the multi_var_pause file?
2. The arrows at each end of the slider don't display correctly. They should look like the ones on the demos at the Slick site. When I manually add the Slick slider to my site, I need to upload directly to the server via FTP a set of resources, including some fonts, that come with the standard download of Slick. Do you know how I can handle this with the widget?

Thanks very much again - we're very close now, and I'm excited to get this up and running on my site!

Cheers,

Gary

[siran]

Hi Gary,

the file multi_var_pause.xar is just the example created using the widget.
The differing arrows might be caused by the use of different fonts or a different slick slider version. You can change the widget to use your manually uploaded version (and fonts) by changing the addresses in the placeholder on the first page of the widget.
Open the widget in Xara.
Select the placeholder.
Go to the web properties placeholder tab and open the HTML code (head) code editor.
Change the three occurrences of https://cdn.rawgit.com/kenwheeler/slick/a2aa3fec/slick to the relative path on your server (for example addons/slick if that is the position relative to the htm files created/uploaded by Xara).
I'm not quite sure if you will be able to fix the arrow appearance, since whatever I tried they looked different in different browsers...
Good luck!

[garycwood84]

Thanks, Siran.

I've made good progress with this today. One thing I'm struggling with, though, is styling the caption. I need it to display in a particular font, so I created a text style in my website called "VideoCaption" and then added that to the style box in the widget configuration. It didn't work. I then tried creating the style in the widget itself (because I'm not sure whether it needs to be in the widget or the website), but it still doesn't work.

Any ideas?

[siran]

Creating the style in the document is what you need to do and it should have worked. It has to be a paragraph style. Just tried it...
Which exact Xara version do you use? Maybe something has changed?
Here is an example setting the font to comic sans bold that works in 12.6.2.

[garycwood84]

Thanks, Siran. This half works for me now. If I change your Comic Sans text to the font I really want to use, and update the style, the correct font appears in the lightbox. However, I can't turn off the bold. Even if I set the style to be regular (rather than bold), it doesn't change in the lightbox, where it's always bold.

I'm using Xara Web Designer Premium 16.0.0.55162 DL x64.

[siran]

I see. The problem is, that the caption is added as a H1 element to the lightbox, and the default font weight for that is bold.
You can work around the problem by adding the following to your page head code section:
<style>.VideoCaption {font-weight: normal !important;}</style>
Otherwise the widget constructor needs to be adjusted not to use a H1 element.