Jump to content

Lightbox Anything - customization for size and background color?

Recommended Posts

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!

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

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?

image.thumb.png.555a0576ebadd43e9be74f8c891fde65.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?

image.thumb.png.555a0576ebadd43e9be74f8c891fde65.png

 

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.

 

Link to comment

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.

 

 

 

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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. 

 

likethis2.jpg

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.