The ghost is because the lightbox’s background is slightly transparent due to this CSS rule:
background-color: rgba(0, 0, 0, 0.85) !important; (on selector .cim-lightbox)
You can make it fully opaque by changing the 0.85 to 1.0.
The rule is added as inline CSS, so I’m unsure where its source code actually lives. Maybe within the lightbox’s package somewhere? The !important modifier makes it difficult to override with added code. It’s easier to alter the existing CSS at its source. Be aware that if the package is updated, it’ll revert back to semi-transparent.
Ok. The plugin is custom so no one can overwrite it. THe ghost seems gone but now the background is black: how could I modify my plugin to make it work exactly like this? https://sacconicase.com/sabbiadoro-appartamento-frontemare-con-3-camere-da-letto/
Change in .cim-lightbox this line
background-color: rgba(0, 0, 0, 1) !important;
to
background-color: rgba(0, 0, 0, .8) !important;
This makes the background exactly the same as in your other example (where .8 transparency is also used).
Transparency is ok but I still have the “ghost” effect above described…: https://test.sacconicase.com/lignano-sabbiadoro-attico-frontemare-6-posti/ effect that is not visible here https://sacconicase.com/lignano-sabbiadoro-appartamento-per-7-persone/
so, having transparency without the ghost or flash effect at each click this is the goal…
I don’t know what effect you mean. For me, the images change completely normally, even more than 4 – I can click through all of them. Of course, the browser needs a moment to load the images, so maybe you’re seeing what your browser is displaying at that moment (probably a pseudo-img placeholder). But as I said, I don’t see that. Tested in multiple browsers.
We have different visual sensitivities, it’s clear to me that the lightbox doesn’t work well, I still have a flash-ghost effect at each click. The problem of the max 3-4 click is not present now, there was when I had a “sticky” always opened lightbox, now the lightbox arise and die at each click
What is this ghost image of? Does the image content change each time you click through the lightbox images, or is it always the same image content each time?
I think you’re seeing the original image on the underlying page through the semi-transparent background. It’s only apparent on slower connections that take a bit of time to load the image. On fast connections or with cached images, they load so fast the “ghost” is no longer perceptible.
The two pages you linked to work exactly the same for me. I had to slow down my connection in order to see anything resembling a ghost, otherwise the images load too fast to perceive anything else.
If the semi-transparent background is the cause, the only solution is to make it fully opaque. The background doesn’t have to be black, it could be gray or any other color, but it would have to be opaque. For example, you could use background-color: #333 !important;
Okay, now I’ll explain exactly how to clearly see this ghost. Go to this page: https://test.sacconicase.com/lignano-sabbiadoro-attico-frontemare-6-posti/ , there is a building with a sort of white triangle on the roof. Place your left index finger at the base of this triangle (the base isn’t clearly visible, but imagine it’s there). Then, with your right hand, click on the photo as if you were shooting a machine gun and look straight at your finger, fixed and focused. You’ll see that it looks like you’re in Ukraine when they fire old Katyusha rocket launchers from the Soviet era. This isn’t fun and shows that making a plugin with artificial intelligence isn’t at all trivial. Now look at the same photo on the real site, where there’s a really cool plugin, that unfortunately doesn’t do everything I need: https://sacconicase.com/lignano-sabbiadoro-attico-frontemare-6-posti/ Repeat the test with your finger and you’ll see that there’s no ghost. I think the semi-transparent background is better because the user doesn’t lose eye contact with the site. The problem I reported is more acute with certain photos than others, but is there perhaps a way to “black out” the photo under the lightbox for a fraction of a second with each click? This would be an interesting trick…
That’s quite a vivid description 🙂 I’m certainly not seeing anything like that. It’s not a matter of visual acuity, there’s simply nothing there in my experience. I wonder if user role has anything to do with it. If you’re currently logged into your site, do you have the same experience when you’re logged out? Flush your browser cache after logging out to ensure you’re seeing it as a new visitor.
I agree that semi-transparent is a nice effect. If it’s not the page’s image that’s causing the visual ghost artifact, blacking it out is probably superfluous. But since you asked, it is feasible to black it out by modifying the lightbox script. There’s a click event listener callback that launches the lightbox modal. In that callback, while launching the modal, also alter the page’s image CSS style by setting a background color and changing the opacity. There’s a similar callback for closing the modal. This callback would restore the original opacity.
Perhaps the problem is also the viewport we are working with. Maybe the website is narrower on your screen than on ours. This can also be decisive for visual perception.
Feel free to post a screenshot or even a video of what you see. Then we could understand exactly what you mean.
Ok, any advice about where free-posting a video? (apart from youTube). Maybe the problem is in my screen, I’d like to check…
You can record it using a variety of tools; there are plenty to choose from online that are sure to be compatible with your system. You could then upload the video to Google Drive, for example—but remember to upload it publicly, otherwise no one else will be able to access it. Or you could simply save it to the media library on your website and embed it in the page.
