Streaming live at 10am (PST)

Lightbox Link Problem


#1

There are 7 products that I ve created in products page.
I have added a lightbox gallery link (without a thumbnail image) with text only on the 7th product (called Özel Karışım Elyaflar),but while I’m hovering over other products the link for the lightbox is still there to click even if it’s not seen
.
To better understanding of the problem. I ve added a loom link below, please watch.

Here is to video so you can see what I meant.


Also, In Chrome, Lightbox Link is places on the wrong place. It should be like the picture below. There is som compability problem with one the styling that I’m using but I’m not sure which one.


Here is my site Read-Only:
https://preview.webflow.com/preview/hillteks?preview=bc9e7a95880bbd1fff892310a6b9fc63

Stage Link:
hillteks.webflow.io


#2

Are you trying to keep “ProfileImage” wrapper with opacity 0%?


#3

yes, portfolioImage divs are set to 0 opacity. They are increasing by the hover on the left menu.

There are many other items in portfolioImage Div but only lightbox link is behaving this way.


#4

Okay on the video the “Ozel” link is showing after hover over the left sidebar menu. All the others don’t. You need all of them to show the lightbox link, correct?


#5

I want seperate lightbox link for all them. not same lightbox link.


#6

In the lightbox settings there’s a small check box to unlink them:


#7

You didint understand the problem correctly. Probably, my fault. Let me try to clarify.

Right now, there is only one lightbox button(in whole page) on portfolioImage7 which works fine when I’m on 7th portfolio. But when I go to portfolioImage5 (by hoverin over the left image menu) and go to same area as the lightbox button of the portfolioImage8, I can still click on it even if it shouldnt be there. Please watch the loom link again.

When I fix this, I’ll add seperate lightbox to each portfolioImage items. Thanks


#8

Gotcha. I understand now thanks. Here’s where you can look. They all have the same base class.

Honestly, there’s no need to make these invisible in the Designer, it will get real confusing. It’ll cause unnecessary problems for ya down the road. If you’ve copied these, then give them all a unique class, not a combo class. Combos are great for navs, simple things like that but not for main page content. (Especially when interactions are applied - use unique)

Give each Portfolio it’s own class, but keep things visible in the Designer. Use 1 total interaction that makes all the content you want invisible, to have 0% opacity OnLoad. That way you can interact with your page.

This design is SUPER NICE!! You’re causing yourself more stress than needed. Just use On Load with no time. But definitely re-set up these sections with their class and you’ll have what you need.


#9

There was already an interaction for that. I’m not sure or at what point I did opacity 0 in designer dont know :slight_smile:

Also, did what you asked and added lightbox to each of them. With differently named base divs. Still not working :frowning: Did I do something wrong ? Not sure.

By the way, thank you but I’ve had some inspiration from a person in webflow. @Blaise_Posmyouck He did a great page.


Any more ideas @garymichael1313 or anyone I’m stuck.


#11

Yes I see it still happening. I just tested and added 2 new lightboxes on your site and it worked fine. At this point it’s probably best to add new light boxes, but this time, dont add a class just insert the images and let Webflow add the class for you. Try that and see.

Or, you can go to each Lightbox and “Delete” the classes. Then add new classes but not combos, give them unique classes. And do that to the links as well.


#12

added new lightbox to each portfolio without giving a class or anything. given them a different thumbnail and different gallery. but still no luck.


#13

Yep, it’s going to be the layer setup. Somehow the layers are actually not cascading up or down correctly. I just deleted everything in your read-only site, except “newBody”.

Made newBody 500px, added two new divs, classed 1 & 2.
Added two lightboxes, classed 1 light & 2 light.
Insert an SVG on 1, added JPEG on 2.
It worked!

  • I did the same on your site and it worked!

With that troubleshooting, it tells me the hover is actually calling the same lightbox. It may look like it’s clicking that one but it’s not. I even added z-indexing to all the right bar layers and still didn’t work.

Man, I don’t want to say it, but I would test by adding a brand new empty page, and recreate what I did. 2 divs with 2 lightboxes and their own unique class. If that works, then you know you’ll need to do this over… ugh… I wanted to refrain from saying it. Because you’ve done so much great work.

But if it’s not reliable then, it’s worth the effort.

Dang… errr…


#14

You didnot gave me the solution but gave me the idea to fix it. Oh man, thank you for your effort. I wouldnt have done it without.

You saying it is about layer setup gave me an idea. I was making portfolio changes by opacity which was the problem. Even its opacity 0. the latest one is always on top so i have aded display:none and display:block to the opacity interactions and see it with your eyes : hillteks.webflow.io

and it took several minutes :slight_smile:


@garymichael1313 Again, thank you some much for your help. I’ve finished the mobile version of the site while you were helping me figure out the problem. I would like your input on the mobile design if possible. thanks.


#15

Awesome Dogukan! Glad you resolved it. About mobile, sure thing. Shoot me a message and I’ll help ya anytime.


#16

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.