Jump to content

How to add a custom code for creating popup window with text for bios

Recommended Posts

Hello,

I am trying to add a custom code for creating a popup window with text. How does one go about it? 

I am using the Nolan layout 7.1 and my Meet the team page has about 20 photos of people with names. It is set in a carousel style layout. Each section has 6 people in it. Screen grab below. 

Would I would like for it to do is when clicked on name/or a text that says "Read bio" a pop should open with text and then close out when not on hover or with a little x sign.

Any help/suggestions much appreciated

Thank you, 

Sneha

Screenshot 2021-10-28 at 13.09.11.png

Link to comment
  • Replies 9
  • Views 2.6k
  • Created
  • Last Reply

Top Posters In This Topic

This answer is from an older thread but I think it should still work for you. It will not work for any gallery block that doesn't have lightbox option, like a carousel, reel,  slideshow. You can use it for strips. 

Yep, you can do this with some Custom CSS. On yourpage where the Gallery is, go to each image and enter the "bio" text into the Title/Description fields for each image. [edit] You must also enable "Lightbox" in the Gallery's Design Tab! 

Under that page's SETTINGS pane, go to the Advanced Tab and add this code to the "Page Header Code Injection

 <style>
div.sqs-lightbox-meta {
 background-color: rgba(255, 255, 255, 0.500);
 height: 90%;
 padding: 50px !important;
}
.yui3-lightbox2 .sqs-lightbox-meta {
 opacity: 100;
 color: #000;
 font-size: 40px;
}
</style>
Edited by derricksrandomviews
Link to comment

Thank you Derrick. I have done the above and it does not seem to work. 

There is a light box that pops up but with the image not the text. 

I have tried all alternatives but nothing seems to be working. 

 

Edited by Sneha_S
Link to comment

I suggest you post a link to your site and give some coders here a chance to look at it and see if they can provide the precise code to make it work. I have found code for the older 7.0 sites, which is what i posted, but I don't think it will work with yours. Here is one, the original poster is using a different hosting service as of now. 

 

 
Edited by derricksrandomviews
Link to comment
On 10/28/2021 at 9:35 PM, Sneha_S said:

Thank you Derrick. I have done the above and it does not seem to work. 

There is a light box that pops up but with the image not the text. 

I have tried all alternatives but nothing seems to be working. 

 

Hi.

To click read more >> show lightbox, you can use Lightbox Plugin.

If you want hover effect only, I mean hover read more >> show lightbox. We can try this approach

  • First, add some text before read more
  • Next, share link to page in screenshot
  • I will give the code to hide these text
  • & add code to when hover read more >> show text & adjust text position, of course

 

(The answer contains an affiliate link, which means I will receive a small commission if you click and buy the plugin according to the link above.)

Edited by tuanphan

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...

Hi there,

I thought I would ask here to see what I want to do is possible.

I'm looking for a way to add a lightbox on a "Meet the Team" section on my website so when a user presses "Read Bio" or "Click here" it won't route them to another page but just open a window to read more. 

I know about the Lightbox anything plugin but I was wondering if there was a way around this using something like Featherlight. I figure the way I've edited this section has made it more difficult to just have a description.

Thanks

Screenshot 2023-01-08 122011.png

Link to comment
  • 1 year later...

We can use custom code, but it is more time consuming.

Lightbox Plugin will use content from Not Linked Page.

We can use section in Footer, it means, you can create some section in Footer, I can give CSS code to hide it. And when users clicking on each button in List Section >> Open a Lightbox with content get from corresponding section in Footer.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.