Streaming live at 10am (PST)

Lightbox issue upon display

Hello,

Hopefully my problem gets a response as my last one never did. I am a student/new to webflow and would really appreciate any assistance.

I used the lightbox widget on my “work” page with no issues at all.
Then applying the widget to the ‘home’ page it is not working. When the widget is triggered upon clicking the photo, only the bottom half of the image is displayed in full and at times all I get is the black background with no image.

I have tried scrapping and starting over and still, same issue. I have tried un-checking the “link with other lightboxes”, I have tried moving the lighbox out of the columns to the container…the section and finally the body… and last but not least tried removing the class from the thumbnail image all to which I get the same result.


preview of homepage lightbox after click


published site of home page lightbox after click


preview of work page lightbox after click

Here is my site Read-Only: LINK
(how to share your site Read-Only link)


Hi @SilentCousin Chelsea,

After looking at the difference in your pages where the lightboxes are I see two paths for you.

  1. Click the HiDPI checkbox to define a width value.
  2. Resize your images, shrink the file size (they are way too big, less than 300k each max.), max width of 1600-2000px.

Please let me know if you have any other questions,

~ Happy Designing ~
Brandon

@WebDev_Brandon Hello I have resized all of my files and I am still having the same issue. I am wondering if it is something within the “body” settings of the “home” page.

Please help! @shokoaviv @PixelGeek ? anyone?

I am not sure as to the point of a forum that no one responds to. This is incredibly frustrating and as a student who was considering continuing to use this program… I am not feeling so good about it at the moment. My first post didn’t even receive a response. @WebDev_Brandon

Hi Chelsea,

Sorry to hear about ur frustrations!

I am not on the forums as much as I used to but i will take a another look tomorrow when I jump online in the morning.

Please update ur share link, publish ur site to the Webflow.io domain and will review ur settings.

Brandon

https://preview.webflow.com/preview/chelseas-cwc-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=chelseas-cwc-portfolio&preview=df716d9db7c63cdecb8b564d37df754c&mode=preview

Thanks @WebDev_Brandon is there an @ tag I can use to reach other staff who are currently online? This is a class project and updates in progress are time sensitive.

Note: The Body page has different settings on the ‘home’ page vs the 'works" page and I am wondering if there is something there causing this. My second guess would be the “Works Image” class and it’s settings. However… the home page is what I used to create symbols for the works page.

Hi Chelsea,

I’m actually only seeing this email now because i initially responded but weekends is when we r off and not really on. There are those in the community who will be around tho.

I won’t be on til late morning at earliest.

Finish the rest of ur project and come back to this issue then. It’s most likely a setting or how u have something on the page itself that is causing the error.

Brandon

Hi @SilentCousin Chelsea,

I have taken a look at your project and after further investigation there is definitely something wrong.

However, I cannot find any immediate way to fix it other than creating a new project and copy/paste it in. As soon as I do that (which I have tested) it works just like it is intended. Something/somewhere happened and it just won’t preview the lightboxes. It’s a glitch, not sure what, but I tomorrow, I will let our engineers know.

I know that is not what you probably want to hear, but it is the only quick answer I have for you. Looks like it is localized to just the project you created. As soon as I test the lightboxes on a new project everything works as intended. You don’t have odd positioning or transforms added, so that’s not the culprit. It is just in the system when your project was created.

Just create a new project. Copy/paste your content for each page to the new project and you will just need to format some things, but it will work.

On another note, I reviewed your project and have a couple insights for you:

  1. DO NOT use containers. Flexbox and Grid will provide more flexibility than containers will.
  2. Do Not use Grids within a column layout. Grid has replaced Columns in all functionality.

Please let me know if you have any other questions,

~ Happy Designing ~
Brandon

Thank you VERY much for looking in to this as well as for the other very useful tips.
Q: How do I copy paste to another project? ( (I know this is quite dim of me, but I know with putting same content on different pages I had to create symbols and could not copy paste ).

Chelsea,

All you need to do it create a new project and then have this new project opened in a new browser tab.

Then just switch between the tabs for copy/paste.

Please let me know if you have any other questions,

~ Happy Designing ~
Brandon

1 Like

Thanks again @WebDev_Brandon for the help troubleshooting and the extra tips. All went well!

1 Like