I create problem-solving mysteries using RW and rely heavily on limelight to display images. I have heard from a lot of players using laptops that the bottoms of the larger lightbox images are not visible on their screen. I would have expected larger images to shrink to the height of the browser window so no matter the height, the entire picture would be visible. Is there a way I can force that behavior in Limelight? I am using Image (Warehoused) boxes for the images.
If yours is not working like this then you can either provide me with a url or I can take a look at a project file. In either case though please make an example like mine with just a single limelight on the page containing the problem image. This way we will initially exclude other things / code on the page that may be causing the problem.
Thanks for the reply. I created two pages, one showing the problem and one showing it working correctly. The difficulty in troubleshooting is that any time I remove any of the content that precedes Limelight, it starts working correctly. I’m using Foundation 6 with a few non-foundation stacks, and my structure is as follows:
Column1, Column 2
Column 1, Column 2
My limelight is in the 2nd container, column 2. If I remove the first container, it works correctly. If I remove Column 2 from the first container, it works correctly. If I remove column 1 from the 2nd container, it works correctly. If I remove just the video from the first container, it works. So it doesn’t seem to be a conflict with a single stack. If you have a method for narrowing down the offending problem, I would greatly appreciate it.
Thanks for the info @GregoryCCB - that has narrowed it down considerably.
The problem is that the browser is reporting a height that is about 2 or 3 times the actual height and so the Limelight height calculation for scaling is correspondingly high.
This can be caused by several things, most usually just some other CSS on the page. I’ve made a little replication of the layout and it works OK with just two sets of container / 2 columns with only text stacks in them. I’m therefore wondering if it is something to do with the embed in the first container or something else on your particular page. Here is my little test project with it working:
You can either try dropping your content into my project and find the point at which it breaks and/or you can send me your test project and I can do the same. This will most likely be a simple thing once we track it down. You can email it to the BWD support address or DM me here with a link to it if you prefer.
P.S. May also be worth taking the Limelight itself out of the column and putting it at the end of the content in edit mode on the page itself. I just wonder if Syphon has something to do with it as well - does it do the same without Syphon on the page?
After hours of trying every combination of stuff with seemingly random results, I realized that this only happens when my page is taller than the viewport. So I scrapped all my test pages from my own projects, and just replicated the text boxes in the project you gave me so that scrollbars appear when the page is displayed in the MacBook Pro 13" simulation. I added a 1200px tall image to the resources, and am using that as the lightbox image in Limelight. This image is cut off on the bottom, and scroll wheel just scrolls the page underneath the lightbox (as I would expect, if the lightbox is sized to the viewport instead of the page length). So that’s about as clean a test case as I can imagine.
Box sync link isn’t pasting in here, so will email to BWD support.