Copy link to clipboard
Copied
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.
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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 );
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
I tried that... No go... I ended up going to a different lightbox code that allowed to be called programmatically... Thanks
Copy link to clipboard
Copied
The existing code IS called programmatically, even in its original form.
Copy link to clipboard
Copied
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.