When editing a node, the zoom image overlays the edit screen (d7 with the seven theme as backend theme overlay). This is because of the z-index in the cloud-zoom.1.0.2.js:

<div id="wrap" style="top:0px;z-index:9999;position:relative;"></div>

I fixed this with adding an override declaration in a css-file:

div #wrap {
  z-index: auto !important;
}

Maybe this should be added as a css declaration in a module css file (not in the cloud-zoom css file for updating reasons).

CommentFileSizeAuthor
#7 1223212.7-cloud-zoom-z-index.patch1.18 KBmrfelton
#6 1223212.6-cloud-zoom-z-index.patch1003 bytesmrfelton

Comments

mandreato’s picture

mandreato commented

Subscribe

giorgosk’s picture

giorgosk
Location Chios, Greece 🇬🇷
commented

it would be nice to have this fixed

Brian MacKinney’s picture

Brian MacKinney commented

Thanks for the fix - works as advertised. Second the request for the module to be updated.

Brian MacKinney’s picture

Brian MacKinney commented

The css fix does move the image below the admin overlay, but the mouse still responds to the image instead of the admin menu.

mandreato’s picture

mandreato commented

I found useful also the Image Zoom module.

mrfelton’s picture

mrfelton commented
Status: Active » Needs review
StatusFileSize
new 1223212.6-cloud-zoom-z-index.patch1003 bytes

Attached patch should resolve this. Note, it probably won't apply cleanly without first applying my patch from #1353892: Support Libraries API for more flexible library location

mrfelton’s picture

mrfelton commented
StatusFileSize
new 1223212.7-cloud-zoom-z-index.patch1.18 KB

Revised patch - forgot to include the css file in the previous one!

stan turyn’s picture

stan turyn commented

subscribe

c50’s picture

c50 commented

If you add the mousetrap class in your css override, this works also to avoid the cursor over the overlay: 

div #wrap {z-index: auto !important;}
#wrap div.mousetrap  {z-index:100 !important;}
ailgm’s picture

ailgm commented

I tried the patch and got this error message:
Notice: Undefined variable: small in theme_cloud_zoom_image() (line 471 of .../sites/all/modules/cloud_zoom/cloud_zoom.module).
That line is:
$output .= l($small, $zoomed, array('html' => TRUE, 'attributes' => array('class' => 'cloud-zoom')));

I had already applied the patch in https://drupal.org/node/1579380, which takes out the line defining $small, so these two patches conflict with each other.

ailgm’s picture

ailgm commented

Changing $small to $slide seems to do the trick.

nicholasthompson’s picture

nicholasthompson
Primary language English
commented

I believe this is fixed in the dev branch as part of the patch in #15 in #1579380: Add support for All cloud zoom settings, and Gallery mode....

$ cat css/cloud_zoom.css
/* Display image bellow Drupal overlay.*/
.cloud-zoom-container #wrap {
  z-index: 499 !important;
}

Fixed in commit 9c1e7860c12ecd46af8b33affe3ea9f9ad8ff314 -- Part of the patch from #1579380 + integration with D7 core library API.

EDIT: Can this fix be tested please!

nicholasthompson’s picture

nicholasthompson
Primary language English
commented
Issue summary: View changes

fixed wrong theme from stark to seven

gonssal’s picture

gonssal
Primary language Catalan
commented
Issue summary: View changes
Status: Needs review » Closed (fixed)

This is fixed.