If you go to my link, go to the page entitled “Ocean Portfolio” go to “galleryitem” and create a div.
Make it fixed full position and then give it any color background. If you try to set any alpha to it (transparency) the editor will go crazy, with panels blinking etc…
I thought my site got corrupted first and then went to an earlier backup started doing the same thing and it happened again
Hi, thanks for checking and I do mean the designer…
That being said, I was talking about a slightly different setting - if you will set that div position to “fixed” and then “full position” so that the div will cover the entire viewport, and then try to give it “alpha” - then you will see the glitch that I experience.
It’s not glitching, I see the results without flickering. Now as I play with it, some parts of the UI are disappearing and my computer starts to suffer.
As you can see on this capture, even with a very low alpha, it’s still covering a lot. I don’t know if you realize but as you’ve set this div inside of an item, and make it relative to the viewport, you’re presented with not just this div, but to a pile of as many divs as items in your list. So your browser is processing alpha for 100 full screen divs. A Fixed div is already very demanding for a browser and a processor to handle, because for every pixel you scroll, the rendering of your page must be redone.
What happens to you is you’re overloading your computer and your browser. You make them handle 2 already difficult things at once: 1/ a large number of elements and 2/ alpha transparency.
I suppose that you only intend to show one of these div at a time, so figure out a way to style this div outside of the list, make it hidden, paste it in the list item, and build your IX to reveal it, making sure the IX targets only one div at a time.
thanks for the explanation - that is what I was figuring but wasn’t sure…
perhaps you can help me come up with a different solution to why i need it…
I was trying to make the equivalent of a light box but styled my way - my thought process was this:
when someone clicks on the thumbnail image I will have a jquery code to toggle a combo class on a div that is hidden.
the hidden div will have the larger image, more info and another paginated collection as a impromptu cms thumbnail slider… and then a close button that will toggle the comboclass off and it will close the “lightbox”. it would be animated with effects and transitions…
I could do the “lightbox” div outside of the photo gallery cms collection component but the only problem is I can’t figure out how to reference the individual image from that gallery into a div outside of that collection… if i open an embed inside a collection i can add dynamic references but outside of it i cannot…
true, but there is a very limited amount of things I can do with the built in lightbox - basically style it - but my way, i could add additional popups (like google maps) and other features and animation!
in any event, if you know what I can try I would very much appreciate a pointer.
Do you have a precise drawing/mockup/proto of what you want to achieve? I get that you click on the item than you’re presented with a fullscreen colored alpha element, with content inside regarding the item…
What do I miss?
All of the above is very easy to achieve with IX2 and I can show you how. Please tell me what I do miss in my description so I’m sure not to leave something out.
control strip on upper right
image in the middle
a thumbnail strip at the bottom
i would have the thumbnail strip expand/collapse
the control strip would trigger pop/up or overlay info about the image including dynamically generated maps (i have lon/lat info for each image inside cms).
Image would be fully responsive
btw I am working on my idea now without the alpha - and I will have a transition of fade in for the modal while the cms gallery hides and then it doesn’t take up the resources… because with a large gallery (i have over 100 items) even without the alpha it is getting glitchy… it looks like webflow is not liking a fixed full screen div on top of a dynamic gallery of that size… btw - i found a project showcase doing a similar thing - but it does it only with only a few cms items so it works fine - when the cms gallery is large it gets glitchy - so I am attempting it with a hidden gallery portion.
Thanks again - I would love to see what your solution would be…
