locked
Lightbox pop-up that contains a playable movie? RRS feed

  • Question

  • User-1793215261 posted

    Hello

    I am trying to create a simple 2 thumbnail/2 movie.mp4 Web page based on this live demonstration: https://www.jqueryscript.net/demo/Lightbox-Popup-Plugin-Flashy/

    My own page has two thumbnail images, 01.jpg and 02.jpg which, when clicked, open up a lightbox pop-up that displays a larger size view of the same jpg:

    <a class="gallery" href="assets/images/01.jpg"><img src="assets/images/01.jpg" alt="violin"></a>
    
    <a class="gallery" href="assets/images/02.jpg"><img src="assets/images/02.jpg" alt="jump"></a>

    The Vimeo and YouTube links on the live demonstration site, which open up playable movies, have the following HTML code:

    <a class="custom" data-flashy-type="video" href="https://vimeo.com/271516323">Vimeo</a>
    
    <a class="custom" data-flashy-type="video" href="https://youtu.be/dzNvk80XY9s">YouTube</a>

    How can I combine this code, please, so that by clicking on a thumbnail jpg, the user is taken not to a larger image of the same thumbnail, but to a lightbox pop-up that contains a playable movie?

    Thank you.

    Sunday, January 13, 2019 6:38 PM

Answers

  • User839733648 posted

    Hi Bluenose,

    According to your description, I suggest that you could add the image's src to the video like following.

        <a class="custom gallery" data-flashy-type="video" href="https://vimeo.com/271516323"><img src="assets/images/01.jpg" alt="violin"></a>
        <a class="custom gallery" data-flashy-type="video" href="https://youtu.be/dzNvk80XY9s"><img src="assets/images/02.jpg" alt="jump"></a>

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 14, 2019 6:31 AM

All replies

  • User839733648 posted

    Hi Bluenose,

    According to your description, I suggest that you could add the image's src to the video like following.

        <a class="custom gallery" data-flashy-type="video" href="https://vimeo.com/271516323"><img src="assets/images/01.jpg" alt="violin"></a>
        <a class="custom gallery" data-flashy-type="video" href="https://youtu.be/dzNvk80XY9s"><img src="assets/images/02.jpg" alt="jump"></a>

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 14, 2019 6:31 AM
  • User-1793215261 posted

    That's great, Jennifer.

    Many thanks for your help.

    Best regards

    Monday, January 14, 2019 11:13 AM