I tried to find a solution for having a background opacity with jQuery.imageZoom by Andreas Lagerkvist

Because I found no solution I asked the developer and here is the working answer:

I think the easiest way would be to give the body-element a class when an image is zoomed out and then simply darken the background when body has that class.

If you want a proper overlay then add a div to the body-element and show/hide that based on the class.

Something like:

HTML
… other code…
<div class=”overlay”></div>
</body>
</html>

CSS
div.overlay {
background: #000;
opacity: .3;

position: fixed;
left: 0;
top: 0;

display: none;
width: 100%;
height: 100%;
}

body.image-zoom-active div.overlay {
display: block;
}

And then you have to modify the jquery.imageZoom.js-file a little.

One function is called when the image to be zoomed is loaded and ready to be displayed. In this function you should give body the class. Another function is called when then image is zoomed back in, this is where you want to remove the class from body.

Look for:

// This function is run once the displayImgSrc-img has loaded (below)
var preloadOnload = function () {

And add this directly inside the function:
$(document.body).addClass(’image-zoom-active’);

And then to remove it look for:
// This function closes the imgzoom
var hideImgzoom = function () {

And add this directly inside the function:
$(document.body).removeClass(’image-zoom-active’);

That should do the trick.

Thank you very much for the fast support Andreas!