Can we modify the opacity of the background of a popped-up image? I want to be able to see more of the website below the image.
I would also like to change the tint of the opacity overlay from mostly black to mostly white.
I know that other tools (FancyBox.js) support modifying the background opacity and the color of opacity.
Thanks!
If you want to change the opacity of an image, you have (at least) 2 options:
To use Custom Element to present the picture and change its opacity.
Thanks for that, J.D.
But there isn’t a way to control the area “surrounding” the image? Not the image itself just the background opacity and tint of a clicked-on image in it’s popped-up state. Lightbox background.
If you want to change the background of the layer around the lightbox as a result of an event (e.g. click), you can do the folowing:
Create a png image with the desired opacity and tint an upload it to your site.
Then in the lightbox code panel:
$w.onReady(() => {
$w('#image').onClick(event => {
$w("Document").background.src = "wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg#originWidth=1970&originHeight=1120";
//use your image src instead
})
})
And of course, if you want to change the layer from the beginning and not on an any event, you can do it via the editor.
Excellent!
Because this is a transparent image I will be using on the event (png) , will the png image need to be created as a full screen image, or will the background.src attribute automatically do as many generations of the image it needs to fill the entire browser window? In your example it appears you are using an image that is greater than 1920 x 1080 (1970x1120).
Thanks, J.D.!
You can even do it 1px * 1px if you want.
Perfect! That way it will fill the window without worrying about higher resolution displays (4K/5K).
Thanks for the timely help, J.D.!
You’re welcome 
I think I did not make myself clear to you, J.D. Sorry about that. Your code and example works just fine for me. It puts a transparent background behind an image and works great.
But, I was wanting to update the background of a “popped up image”. See my screen print below, please. I want to change the transparent “black” background to be lighter and a white shaded transparency instead of a black shade.
*Edit: Unless I am putting this new code in the wrong event?
I want to change the red-marked section of a popped up image:
My code is meant to change this black background if you click the image in the lightbox (after the lightbox gets open). If you meant to something else, please elaborate.
I am wanting to change “the lightbox”.
The black is to opaque for my taste. You can see a working example here at this URL. MaryWhyte . com/paintings.php
My url: roberthopkinsart . wixsite . com/myjourney/digital
Again, do you want the popup layer to be in color/opactiy X and then on a certain event to change it to color/opactiy Y? or do you want the layer to always has a certaincolor/opacity without changing it during the session?
My code is for option 1, but if you want option 2 there’s no need to use any code or any png file, you can design the layer via the editor.
Hi J.D.
On my screen print above ^^^, I clicked on my painting on my art webpage, and the image is enlarged. I want the black portion (border) to be more transparent so that I can see the webpage under it more. I do not know how to explain it any other way. I am trying to emulate Mary Whyte’s images when you click on an image on her website. I have based my website theme using her website. https:// www. MaryWhyte . com/paintings.php
I have looked in the editor for every option on how to change the image pop-up background and there are no options. For an individual image or globally for the entire website. It would be nice to have this option globally on the website! Or even, by page.
OK. So it’s not a lightbox, it’s Wix-image expendable popup and it can’t be changed by Corvid as far as I know.
However, you can create a lightbox or an expandable box of your own and display there the enlarged image and to design the background.
That is what I thought, J.D. Thanks for your insights and help!
Hi Robert. I am having the same problem… how did you manage to solve it?
I wrote that a year ago already… Time flies!
I continued to use the default background opacity and said, oh well!
It would be nice if we could control the level of opacity, but to me honest, after I thought about it, I was nit-picking and no one would notice the difference.
Sorry I cannot give you any further help. Wix may have tweaked it at this point. Someone else may know the answer.
