SectionsPro – Layer Background Video - Toggle and Style

Big White Duck
1

Is it possible to do these three at once with a ButtonPlus2?

  • Close Limelight A (housing the Button)
  • Toggle video playback
  • Open Limelight B

There’s no issue with open+close by simply adding two classes to the Custom Classes of the button (limelightA-close limelightB). But adding play-toggle as a third results in only the toggle having an effect. The background video is attached to page body.

Thanks for any pointers!

–––

As a bonus, and only if it’s not a big ask, I would really appreciate if anyone could help with adding background video styling in the mix. I would like to be able do it simultaneously with the above three actions. Either with the same button or triggered when certain limelights/lightboxes are opened/closed. Couldn’t figure it out with limelight events/triggers. Again, the background video is attached to page body.

This is the effect I’m going for, having tested in the page’s css.

video {
filter: blur(50px) brightness(60%);
transform: scale(1.27)
;
}

–––

@tav The stack is if course amazingly powerful as it is! In the future, if there’s any chance to get the option of randomizing the starting point of the video, and also a video slideshow option with multiple files, again with optional randomization, I think could be useful and helpful in enabling an even more unique user experience.

2

Partial success, as I found two solutions to applying video filters on button clicks. The one I prefer involves adding an onclick and a classList.add to the button’s data attribute, and of course the new style to CSS.

However, still no luck with toggling background video playback and at the same time closing+opening lightboxes. The play-toggle class play well (haha) with another class if that closes a lightbox. A class that opens a lightbox has no effect if play-toggle class is also present. (All limelights and lightboxes on the page have unique IDs.)

Still trying to find a workaround. In the meantime if anyone has a suggestion it’s much appreciated!

Here’s a little test project:
https://drive.google.com/drive/folders/1qM5-e9Cpz4Z-zOuovlYMOOcjLT7ZN5Es?usp=sharing

3

All OK, found a way to trigger an additional button with javascript. Button 1 closes a lightbox, opens a lightbox, adds a class to the video to apply a CSS style, and triggers Button 2. Button 2 toggles video playback. It’s still interesting why the three actions wouldn’t work simply by adding all three classes to one button.

The reason for the topic was that because I never did any CSS of Javascript I didn’t expect to find a solution on my own.

4

Limelight exposes several events in its API that are fired on the window when light boxes open, close and undergo a user close.

For example, to execute some code when the user clicks to close a lightbox you would use the
infix:userClose() event. This will also tell you the unique ID of the lightbox that triggered the close (as per the notes in edit mode.

You would use the events like this:

$(function(){
	$(window).on('infix:userClose',function(e,instance){
		console.log('Limelight Closed with Content ID of: ' + instance.lightboxId() + 'within a 	Limelight with an id of: #' + instance.uniqueId());
	//Do other things here
	});
	$(window).on('infix:open',function(e,instance){
		console.log('Limelight Opened with Content ID of: ' + instance.lightboxId() + 'within a Limelight with an id of: #' + instance.uniqueId());
	//Do other things here
	}
1 Like