How to have Pop-up Text box (like a lightbox) when clicking on Gallery Images

Hey Everyone,

Maybe you can help me figure this out. I'm working on this site: www.vancouver2017.com

I've utilized a lot of code that I have found through this forum - and I'm super happy with how the site has turned out - so thank you! Keep posting your answers and questions because it's incredibly useful. Anyway... I have a question that I haven't found any answers for yet.

On the Speakers page (http://vancouver2017.com/speakers/) about halfway down, I have a gallery of 20 photos of people who will be doing a PechaKucha-style talk at our conference. It was suggested to me that I create a lightbox of their Bio when clicking on the image.

Is there a way to get this done within the gallery block? If not, if there's a way to set up individual image blocks with the same result, I would be open to suggestions there too.

Can anyone help me out with this? Btw, I am using the Pacific Template.Cheers, and thank you!!Brendan

Yep, you can do this with some Custom CSS. On your /speakers/ page 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 (see attached screenshot)

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

I made a choice to make the background partially transparent so the person's photo shows through a little bit. If you want the background to be completely opaque, change

background-color: rgba(255, 255, 255, 0.500);

to:

background-color: rgba(255, 255, 255, 1.0);

If you want to see it "in action", go to: https://amazing-andrea-533j.squarespace.com/testing and then click [Visitor Access]. Once the page appears, click on either of the two images in the gallery.

Hope that helps! Let me know if you have any questions.

Thank you so much @AndreaDev ! I'm going to work with this and see if I can get it to work! I'll let you know if i run into any roadblocks... Thanks so much for helping me here!

@AndreaDev Hi, where do we enter the description that should view when the lightbox pops up.

@parulnayyar Hi. The Title and Description are accessed by clicking "Edit" on the Gallery Block, then clicking on the "settings" icon for each image in the Lightbox. I have attached two screenshots, one showing where the Settings icon is, and the other pointing out the Title and Description fields. Hope that helps!

Hey @AndreaDev, thank you for the response - it's most appreciated. Unfortunately, this wasn't exactly what i was looking for, as the photo also pops up in full screen with the text over the top - makes it hard to read. Is there a way so that ONLY the text can pop-up in a small window/lightbox, rather than A) with the photo, and B) without filling the screen?

Any help at all is appreciated!

CheersBrendan

@brendancss The "full screen" is how the Lightbox feature is configured to work by Squarespace. There may be a way to change it's behavior, but that's not a feature I've ever tried to customize. You can change the background color to be a solid color to "blockout" the photo by changing

background-color: rgba(255,255,255, 0.500) 

to:

background-color: rgba(255,255,255, 1.000) 

OKAY! I found out how to do what i want to do. Maybe there's an easier way, but my way involved code boxes. So i had to say goodbye to the gallery block... It was a bit repetitive to do it 24 times, but once i found a rhythm it really didn't take much time.

I essentially utilized the answers provided here: https://answers.squarespace.com/questions/67508/popup-window-with-text.html so thank you @kenwestphal!

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>

(Play with the CSS styles to customize it how you see fit.)

Step 04. Advanced Styling in Custom CSS

For me, I just wanted to set a max width, so i added the following to the Custom CSS tab (Design>Custom CSS)

.featherlight .featherlight-content
{max-width: 500px;}

BOOM. I had to repeat steps 2 & 3 a few times (24, actually) to set up my page, but it got me the result i was looking for.

Check out my finished result at http://vancouver2017.com/speakers/#pechakucha

I'd love to hear any feedback or ways to make this easier in the future.

Cheers,Brendan

Thanks so much for this, i followed your steps but when i click the link i made it just jumps to the top of the page. any idea why?

Hi @AndreaDev - Thanks so much for this. I managed to get it work on my desktop browser however the popups with text don't appear in the mobile version. Any tips on how to make it work for mobile browsers as well? - Much appreciated.

@ShahidAfridi If you provide a link to your live or trial site, I can look at your specific site's underlying code and perhaps help you. Thanks.

@brendancss - thanks so much for this! A super helpful extension of what @kenwestphal wrote.

Weird issue - my aim is a grid - but once I line everything up, I click refresh, and the images seem to revert to a stacked position. Did you encounter this issue?

I've been trying to solve the problem with two photos before I repeat the task 30 times :)

Any insight? The page where I'm experimenting can be found here: https://beth-beauchamp-manm.squarespace.com/staff-1

@bethybeau

Are the Code blocks placed on the page side by side OR on top of each other (stacked position)? I've had no issues thus far with putting them side by side and them staying that way. Feel free to just try to put the two pictures of the staff members side by side (not using HTML code) and see if they revert to a stacked position.

@kenwestphal - thanks for the response! HTML was to blame - phew!

Hey @Sjiron, were you using it on a page within an index? I had the same problem when using it on a page within an Index. To solve the issue, try one of two things: A. copy and paste the Header Injection Code within the index area... click on the gear of the Index and paste it within the advanced tab at the header injection area....

Failing that, take the page out of the index and just have it on its own.

I do find using so much code does create more bugs. Sometimes I need to close out of squarespace altogether when it starts getting too buggy... Hope this helps!

Sorry @kenwestphal - me again! Now I'm having this ^ problem :/

When I move stuff around in edit mode It all seems fine, but when I'm done It stacks all of the boxes up. I've attached a picture of how it looks in edit more and when I hit done.

Here's the link to my site https://sim-zuk-zrdc.squarespace.com/services#services-1

Please help! Thank you :)

@SimonaZ7 Looking at the HTML code, you are missing the end quotes after each with the end quotes added. Adding that should fix it.

Thank you @kenwestphal . I've just added them in but it didn't seem to change anything? :(

@SimonaZ7

From the looks of the code, nothing is standing out as being an issue. Are each "services" block their own HTML Code block? Or do you just have one block with all of the HTML code in there?

If you feel comfortable enough, you can give me access to the Site and I can dig more into this issue if you'd like. Email is ken @ kensdesigns.com

Hi Brendan! Thanks so much for the code! The issue I'm having is that when I'm copying and pasting the two code boxes to create multiple lightboxes, the text always references the first lightbox I created. Any ideas why?

Thanks!

@klein11

Be sure the other lightboxes have different IDs such as would be the name of the ID for the first lightbox, would be the name of the ID for the second lightbox, would be the name of the third lightbox, etc.

Thanks this has been a great help. I had the same issue others did with the link simply bringing me to the top of the page and found a fix.change the step one code to this:

The problem I am having is image size. How did you get your images to only go so large? The images that I am using to click on for the light box will go as big as the screen allows. I don't want them to go any larger then there original size. My page is www.wallpaperhappy.com The images I am referring to are the icons such as "full wall preview" "easy on /off"Thanks so much!

@mgoins200

You're welcome. It looks like you have fixed your issue by using some CSS on your images in the lightbox. Let me know if you have any other questions.

Sorry I mean the images you click on to open the light box. They enlarge beyond there original size on bigger screens so they get grainy and over sized.

In the original example for this post http://vancouver2017.com/speakers/#pechakuchaby brendancss his images stop growing at a certain point as you enlarge the browser. Mine just keep getting bigger.

Thanks!

@mgoins200

There are a few options:

1. In your Squarespace Design settings, you should be able to set the max width of your site. This will help with the imaging continuing to enlarge regardless of screen size.

   1. Otherwise, you can use CSS to set a "max-width" of the images. So if you set a max-width:100px, the images would not get larger than 100px wide. If you do this option, be sure to also include CSS for height: height:auto;