Slimbox - Overlay in front of the image

Question

I've a problem with the Slimbox plugin. When I click over an image, it loads the overlay in front of the image.

Here is an example link: http://immodena.ch/verkaufsangebote/villen/item/38-villa-mit-wohnen-und-arbeiten

I don't understand where is the trouble. I've thought that was a problem with some z-index that overrides the default plugin's stylesheet, but with the inspector I don't see anything in this direction.

Some of you, could tell me what am I doing wrong?

I don't see a problem in Firefox, Chrome, IE9, IE8, IE7, Safari and Opera. Have I missed some browser? — Morpheus, Mar 11 '13 at 11:27
When you click on an image on the gallery the opacity overlay goes in front of the image. I mean bellow the big one. You don't see that? — Davide Morotti, Mar 11 '13 at 12:16
Works fine for me too. could you take a screenshot of what you see please? — Lodder, Mar 11 '13 at 12:59
@Lodder Here is the screenshot: http://immodena.ch/slimbox.jpg — Davide Morotti, Mar 11 '13 at 13:06
what browser are you using? also, try a force refresh (CTRL + F5) — Lodder, Mar 11 '13 at 13:17
@Lodder I'm trying with Chrome, Firefox, IE, but I see ever the same. — Davide Morotti, Mar 11 '13 at 13:18
@Lodder Ok, I understand why you don't see that. You have to click on "Bilder" bellow the image and try with a thumbnails! — Davide Morotti, Mar 11 '13 at 13:19
Ah I see it now. Those images are using a different plugin for the enlargement. Are you not able to try using the same as the other image? — Lodder, Mar 11 '13 at 13:24
@Lodder Probably is a conflict with the other plugin. Using the same plugin as the other image it's a little bit tricky because of the Joomla's plugin we are using for accomplish this gallery. — Davide Morotti, Mar 11 '13 at 13:29
@Lodder So I've just resolved that trouble with another plugin. Thank you for the help. — Davide Morotti, Mar 11 '13 at 13:38
ah ok no worries, well if u wanted to use the same plugin as before then simply follow the instructions in my answer below :) — Lodder, Mar 11 '13 at 13:41
@Lodder I've missed your answer because I was working on finding an alternative solution. But now I want to try with yours. Thanks a lot and have a nice day. — Davide Morotti, Mar 11 '13 at 13:45

score 10 · Accepted Answer · edited Feb 15 '14 at 19:32

10

right, finally found the problem.

You need to add z-index:1; to #lbImage { }

Then you need to remove z-index:9999; from #lbCenter, #lbBottomContainer { }

and remove z-index:9998; from #lbOverlay { }

Hope this helps :)

 #lbImage {
     z-index:1;
 }

div#lbCenter,
div#lbOverlay,
div#lbBottomContainer {
    z-index: inherit;
}

edited Feb 15 '14 at 19:32

RyanS

3,964
3
23
37

answered Mar 11 '13 at 13:34

Lodder

19,758
10
59
100

4

These changes may fix the mask issue but makes the plugin not working well. The problem is about using jQuery 1.9+. If you use jQuery 1.8.3-, the problem will gone. – Vahid Apr 14 '13 at 11:02
Thanks Natasha! That worked for me! Seems Slimbox needs to release an update. – James Apr 18 '13 at 19:29
1

@Natasha - fair enough, but I'm not going to recommend the OP hacking into the plugin file. The developer should release an update to cate for the latest version of jQuery. Easier to do what I suggested rather than hack the plugin which might lead to it becoming faulty ;) – Lodder Apr 19 '13 at 10:00

Slimbox - Overlay in front of the image

1 Answers1