Lightbox Anything - customization for size and background color?

Site URL: https://www.no-frames.com/test-gallery/

Hi,

My client purchased the Lightbox Anything plug-in, which I am using to lightbox videos — some are individual videos and some are multi-video slideshow galleries. I am confused on how to customize the lightbox though. I assumed it could load a page as it was designed, but the lightbox seems to override any background color I assign. I copied the customize CSS from their instructions, but I'm not sure what else to do. Does the linkage remain the same "#lightbox_[source]"? 

My current lightbox linked to a page (Click on the last image): https://www.no-frames.com/test-gallery/   

The page it is linked to: https://www.no-frames.com/slideshow-vid

I would like to know how to:

1. Assign all lightbox's to black color, and assign a bigger width + height of the overlay window. 

2. Assign all lightboxes fonts to be white color.

3. Increase the opacity of the overlay color between the lightbox and the page it sits on. 

4. Have the same design for both single and multi video lightboxes. For multi, I was thinking of lightbox linking to a slideshow gallery. For the single video, is it possible to format a title and description without creating a page for every video link? I will be creating image thumbnails instead of using Squarespace's auto-creation for videos. 

5. Have the videos auto-play.

I really appreciate any responses for any or all of the issues I'm trying to solve, as I'm new to customizing and working around Squarespace's parameters!

1 hour ago, hellomw said:

My client purchased the Lightbox Anything plug-in. I am confused on how to customize the lightbox though.

Have you contacted the supplier of the plugin?

I'd expect them to provide you with support for their product.

In instructions.html file, you will see a tool to do these.

#1. I see black color here

https://www.no-frames.com/slideshow-vid

#2. For which elements?

#3. You mean this overlay color?

On 12/17/2021 at 8:18 AM, tuanphan said:

In instructions.html file, you will see a tool to do these.

#1. I see black color here

https://www.no-frames.com/slideshow-vid

#2. For which elements?

#3. You mean this overlay color?

Hi @tuanphan, 

I appreciate the reply, as I've seen you generously help so many people in these forums!

I was able to create the background color for linked pages using the custom inline code from the instructions, but I am still not able to format any linked video. Even with the extra code of replacing the default lightbox, the Squarespace default lightbox still displays, without any text. The custom media code from the instructions does not seem to work. Not sure what I am doing wrong. 

I could create a page for each video, just to include some text, but would like to avoid that if possible.

Update:

The custom code for media lightbox only seems to work when using a video in a gallery (https://www.no-frames.com/testing-page).

The Squarespace default lightbox is used instead when:

- linking to a video from an image in a gallery ( first image here: https://www.no-frames.com/nf-commercial) - linking from a button ( "View Reel" https://www.no-frames.com/nf-home), I also don't know where I would add any text that I want.

On 12/21/2021 at 6:43 AM, hellomw said:

Update:

The custom code for media lightbox only seems to work when using a video in a gallery (https://www.no-frames.com/testing-page).

The Squarespace default lightbox is used instead when:

- linking to a video from an image in a gallery ( first image here: https://www.no-frames.com/nf-commercial) - linking from a button ( "View Reel" https://www.no-frames.com/nf-home), I also don't know where I would add any text that I want.

 

 

 

Sorry for the delay. Recently stressful. Do you still need help?

On 12/24/2021 at 9:53 PM, tuanphan said:

Sorry for the delay. Recently stressful. Do you still need help?

HI @tuanphan, Sorry to hear that, I hope it's less stressful for you soon. I appreciate the follow-up. Yes, I still need help. I have been communicating with the developer of the plug-in, but I still don't feel I can control much, and it's still not working how I would like it to. I try changing things one-by-one in the CSS to understand what gets effected, but I am still having no luck. 

http://www.no-frames.com/testing-page

I would like my lightboxes to have the same layout (attached)

1. with a title and smaller line of text, positioned below and aligned left with the video

2. I also don't know if it's possible to align the slideshow thumbnails to the left?

I have two type of links. One links to a single video on Vimeo, one links to a page that contains a slideshow of multiple videos. I also changed the desktop width to 90% so that the slideshow thumbails and text might peek above the fold. This is what's happening now:

Gallery block. 

• For video, there is no option to include a link to a page, it defaults to a single video. No title or text appears.
• Images can link to a page or to a video.

Image block.

• Video links open Squarespace default lightbox instead (the “x” to close is different and padding/margins are different). No text appears.