How execute: <a href="#" class=ryv-popup"></a> in a button action?

[Orbit-Monkey]

I am deploying my animate cc html 5 canvas animation into a WordPress website... I have a button in my animation that I want to trigger a lightbox when clicked.  The code to do this on a standard html page is <a href="#" class=ryv-popup"></a>     - how would I execute that same function in the action panel in Animate cc?   I assume it has to be javascript vs html.

[ClayUUID]

The link code you've provided does nothing. There's no onclick property, and the link target is "#", a null anchor.

I'm guessing the link's onclick is assigned programmatically via the class ID. Without that code, your question is impossible to answer.

[Orbit-Monkey]

here's the code from the pop up plugin...  would part of this go in the action panel?

(function($) {

    var url = $('.ryv-popup-video').attr('data-ryv-popup-url');

    $('.ryv-popup').click(function(event) {

        event.preventDefault();

        $('.ryv-popup-wrapper, .ryv-popup-video').fadeIn(200);

        $(".ryv-popup-video").attr("src", url);

        $(window).trigger('resize');

    });

    // Close Function

    function close_ryv_popup() {

        $('.ryv-popup-wrapper, .ryv-popup-video').fadeOut(200);

        setTimeout(function(){

            $('.ryv-popup-video').attr('src', '');

        }, 200);

    }

    // Close on click

    $('.ryv-popup-wrapper').click(function() {

        close_ryv_popup();

    });

    // Close on Escape

    $(document).keyup(function(e) {

        if (e.keyCode == 27) {

            if ( $('.ryv-popup-wrapper').is(':visible') ) {

                close_ryv_popup();

            }

        }

    });

    // Resize

    $(window).resize(function() {

        var videoWidth = $('.ryv-popup-video').width();

        $('.ryv-popup-video').height(videoWidth*0.5625);

    });

})( jQuery );

[ClayUUID]

You just want to perform the click event, yes? So copy that code into your Animate click event handler:

var url = $('.ryv-popup-video').attr('data-ryv-popup-url');

$('.ryv-popup-wrapper, .ryv-popup-video').fadeIn(200);

$(".ryv-popup-video").attr("src", url);

$(window).trigger('resize');

Should work.

[Orbit-Monkey]

I tried that... No go... I ended up going to a different lightbox code that allowed to be called programmatically... Thanks

[ClayUUID]

The existing code IS called programmatically, even in its original form.

[Orbit-Monkey · Accepted solution]

yes - you are right... let's say this new code was a lot simpler to implement and didn't rely on classes...

Used lity - a simple lightbox.

Code added to click action was:

var lighttbox = lity('//vimeo.com/xxxxxxxx');

worked perfect.