BREN Posted May 18, 2017 Posted May 18, 2017 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
andreab Posted May 18, 2017 Posted May 18, 2017 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.
BREN Posted May 18, 2017 Author Posted May 18, 2017 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!
parulnayyar Posted June 6, 2017 Posted June 6, 2017 @AndreaDev Hi, where do we enter the description that should view when the lightbox pops up.
andreab Posted June 7, 2017 Posted June 7, 2017 @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!
BREN Posted June 21, 2017 Author Posted June 21, 2017 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
andreab Posted June 21, 2017 Posted June 21, 2017 @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)
BREN Posted June 22, 2017 Author Posted June 22, 2017 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
Guest Posted June 27, 2017 Posted June 27, 2017 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?
ShahidAfridi Posted July 6, 2017 Posted July 6, 2017 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.
andreab Posted July 6, 2017 Posted July 6, 2017 @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.
bethybeau Posted July 14, 2017 Posted July 14, 2017 @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
spacetutorials Posted July 14, 2017 Posted July 14, 2017 @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.
bethybeau Posted July 17, 2017 Posted July 17, 2017 @kenwestphal - thanks for the response! HTML was to blame - phew!
BREN Posted July 17, 2017 Author Posted July 17, 2017 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!
SimonaZ7 Posted August 14, 2017 Posted August 14, 2017 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 :)
spacetutorials Posted August 14, 2017 Posted August 14, 2017 @SimonaZ7 Looking at the HTML code, you are missing the end quotes after each with the end quotes added. Adding that should fix it.
SimonaZ7 Posted August 14, 2017 Posted August 14, 2017 Thank you @kenwestphal . I've just added them in but it didn't seem to change anything? :(
spacetutorials Posted August 14, 2017 Posted August 14, 2017 @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
klein11 Posted December 14, 2017 Posted December 14, 2017 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!
spacetutorials Posted December 18, 2017 Posted December 18, 2017 @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.
Guest Posted May 18, 2018 Posted May 18, 2018 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!
spacetutorials Posted May 18, 2018 Posted May 18, 2018 @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.
Guest Posted May 18, 2018 Posted May 18, 2018 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!
spacetutorials Posted May 18, 2018 Posted May 18, 2018 @mgoins200 There are a few options: 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. 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;
Recommended Posts
Archived
This topic is now archived and is closed to further replies.