Pop-up code injection

Site URL: https://butterfly-magnolia-5ta9.squarespace.com/config/pages

Hello, could you help me create a pop-up window  when clicking or hovering over a picture or a text in this section please? No plugins that require payment please, since I need an affordable solution and would also like to learn the code for future reference. You can find the page section of the screenshot on the Home page.

Thank you all for your time and insight.

On 8/10/2021 at 12:49 AM, EveR_ said:

Site URL: https://butterfly-magnolia-5ta9.squarespace.com/config/pages

Hello, could you help me create a pop-up window  when clicking or hovering over a picture or a text in this section please? No plugins that require payment please, since I need an affordable solution and would also like to learn the code for future reference. You can find the page section of the screenshot on the Home page.

Thank you all for your time and insight.

 

Hi,

Can you add a description under title?

If yes, add for first image, we will test some code to make text appear when hovering on title

10 hours ago, tuanphan said:

Hi,

Can you add a description under title?

If yes, add for first image, we will test some code to make text appear when hovering on title

Hi! Thank you for replying. I added some text to the list, please tell me if I can help you in any other way.

On 8/13/2021 at 12:55 AM, EveR_ said:

Hi! Thank you for replying. I added some text to the list, please tell me if I can help you in any other way.

Your site is private. Can you setup password & share url again? We can help easier

Hi, I'm sorry, I set up a password. 

Passw: hello97

https://butterfly-magnolia-5ta9.squarespace.com/config/settings

Hi, I found a way to create a pop-up by clicking on the title and on the image. Would you be so kind to help understand how could I insert videos in the pop up too? My boss would like to add for me to find a way to add video as well in the pop up...if you could help before the 18th that would be ideal...but no pressure, I understand if you cannot comply.

I believe the source code was from this thread: 

1step: Step 01. Insert the following into the code injection area of the advanced tab of the page you wish to utilize the pop-ups: 

<link href="//cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.css" type="text/css" rel="stylesheet" title="Featherlight Styles" /><script src="//cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

Step 2. Now you need to create two code boxes.

Code box 01 - For Display (this is your image or text that will show on the page)

<a href="#" data-featherlight="#bio-name">

<img src="image link goes here"</a>

<p style="text-align:center; color:#727272;">Text Goes Here</p>

Step 03. Code Box 02 - For your Bio/pop-up Window

<div style="display:none;">
<div id="bio-name">

<h3>Header/Name</h3>

<p style="font-family:Lato; font-weight:500; font-style:normal; font-size:12px; letter-spacing:.4px; line-height:2.18em; color:#999999;" !important>

Text goes in here.

</p>
  </div>
  </div>

You can see the edits/code on the Home page (Alex S., University of McGill, The American High School in Japan (Japan) SECTION) https://butterfly-magnolia-5ta9.squarespace.com/config/pages

Although here it seems it's not working, it actually is, on the company's website. The video I would like to add can be found at the following link: https://www.youtube.com/watch?v=NFyxml7idZA

Thank you again for the consideration.

@tuanphanIt has to be a video, not a gif...I just need to figure out how to insert it in the code.

Thank you for your help.

On 8/16/2021 at 2:11 PM, EveR_ said:

@tuanphanIt has to be a video, not a gif...I just need to figure out how to insert it in the code.

Thank you for your help.

Try add video block here

<div style="display:none;">
<div id="bio-name">

<h3>Header/Name</h3>

<p style="font-family:Lato; font-weight:500; font-style:normal; font-size:12px; letter-spacing:.4px; line-height:2.18em; color:#999999;" !important>

Text goes in here.

</p>
  <video width="320" height="240" controls>
  <source src="enter  video url here" type="video/mp4">
  Your browser does not support the video tag.
</video>
  </div>
  </div>

Replace with your video direct url