Photoseller – Galleries – Zoom window is hidden behind the watermarked image

[ronnytertnes]

Hi, zoom on mouseover hides the zoom window in the back.

Unable to find a solution for this problem, see gallery here:

[http://ronnytertnes.no/photogallery/]

(sorry it’s in Norwegian, but I am sure you see the problem

I guess the photocrati theme or something messed up the CSS… I even deactivated and deleted and reinstalled, but no difference…

[admin]

When I click on an image to go to the photo details page, it gives me a 404 page error. Have you deleted the photo details page from your installation? The plugins creates that page when you installed it. Go to the trash tab of your WordPress pages and see if you have a page named “Photo Details”

[ronnytertnes]

Sorry, forgot I just set that page to “draft” to get off my gallery meny drop down list… Please have a try now…

[ronnytertnes]

ok, I just switched off the photo details with zoom page and use the lightbox instead, that way my pot file translation works also since there was some buttons and text that refused to be translated …

Still puzzled as to why the zoom lense window ended up behind the photos though…

[Peter]

Hi @ronnytertnes,

Could you please create a test gallery which uses the zoom feature and provide the link so I can take a look at it?

[ronnytertnes]

Sure:

[http://ronnytertnes.no/photogallery/gallery6/]

[Peter]

The cause of the problem was because your theme’s CSS code is setting z-index in the main page content div. This was in turn affecting the zoom popup div element because it was creating a “stacking context”.

The CSS spec has more info about what a “stacking context” is:

http://www.w3.org/TR/CSS2/zindex.html

This is easily fixed by doing the following:

1) Go and grab the following plugin:

http://www.tipsandtricks-hq.com/wordpress-custom-css-plugin-6413

2) Then add the following CSS code in the settings of the above plugin:

#content{

z-index: -1;

}

[ronnytertnes]

Thank you

[ronnytertnes]

@Peter

Thanks, it works on the image itself but it makes the entire gallery un-clickable, can’t click on images og the add to cart button… So I had to remove the

#content{

z-index: -1;

}

coincidence ?? I added and removed it several times and every time it was there the galleries became unclickable…

Seems to work in IE but not Chrome …

[Peter]

I initially had another solution using “opacity” which was probably better but I deleted it because IE seems to be the odd one which doesn’t always follow the CSS specs.

Ok, please delete the previous CSS I gave you and try this and let me know if that works:

div:first-child{

-webkit-transform: translateZ(0);

-ms-transform: translateZ(0);

-moz-transform: translateZ(0);

}

[ronnytertnes]

@Peter

Thanks it works in chrome but in IE the zoomwindow is still behind the image.. Also the dropdown menus became unclickable in chrome..

[Peter]

Hi,

I think that the problem lies in the following line of CSS code in you theme’s style.css file on line 394:

#content { /* This sets the width of the page content area  */

position		:	relative;

margin			: 	0;

width			:	100%;

z-index			:	1; <======= this is line is causing the issue

}

The code I have given you thus far has tried to counter-act the above z-index setting but obviously there isn’t a one-size-fits-all solution due to different browser behaviours.

You can try another thing which is to save a copy of the original style.css file of your theme and then delete the above line.

The only problem with this is that you’ll have to remember to do it again if you ever update the theme’s version.

Another thing you can do is to change themes and I’m very confident that it will work with no problems because I don’t know of many themes which set a z-index value in a main content div like your current theme is doing.

[Author]

Posts