Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


Sneha_S

Question

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
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

4 answers to this question

Recommended Posts

  • 0

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
  • 0

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
  • 0

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
  • 0
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.

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

Create an account or sign in to comment

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


×
×
  • Create New...