Welcome to TalkGraphics.com
Page 2 of 5 FirstFirst 1234 ... LastLast
Results 11 to 20 of 41
  1. #11

    Default Re: Video in Lightbox

    Thanks very much for this, Siran. It's fantastic!

    Two questions arise for me, though:
    1. How can I change the size, font and text colour of the caption?
    2. 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.

  2. #12
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    740

    Default 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).

  3. #13
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    740

    Default 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.

  4. #14
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    740

    Default 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.
    Attached Files Attached Files

  5. #15
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    8,389

    Default 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
    Acorn - My currently active Xara software: occasionally serviced XDPX, purposely unserviced XDPX12 & XDPX11 (32/64-bit), unserviced XWD Premium 15 & 12, XPGD10, X3D7 and lots of 'permanently-owned' licences back through time (to CC's Artworks)

  6. #16

    Default 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.

  7. #17

    Default 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: CarouselLightboxExample.web

    Cheers,
    Gary

  8. #18
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    18,408

    Default 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:
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	a-href.jpg 
Views:	11 
Size:	64.6 KB 
ID:	122053  
    Egg

    Intel i7 - 4790K Quad Core + 16GB Ram + 232 GB SSD
    Xara Designer Pro X 16

  9. #19

    Default 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: CarouselLightboxExample2.web.

    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...

  10. #20
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    740

    Default 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.
    Attached Files Attached Files

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •