Overlay break floating images

Hi,

yes, you’re right.
I haven’t found a way to fix that yet.

Cheers,
Arne

Yes the problem is with jquery-colorbox-zoom.css and this CSS class :
a.zoomLink

The code is :
position: relative;
display: inline-block;

It works great for images that are not floating.

Ok, now it seems that your plugin add some extra code to the img tag like:
<img class=”alignright size-thumbnail wp-image-25 colorbox-1“

If you could read/parse the CSS class inside the img tag, then you could do something like :

is there a “alignright” or “alignleft” CSS class in it ?
> Yes ?
> is it “alignright” ?
> Yes ?
> load the right CSS stylesheet jquery-colorbox-zoom-right.css
> is it “alignleft” ?
> Yes ?
> load the right CSS stylesheet jquery-colorbox-zoom-left.css
> else : load the right CSS stylesheet jquery-colorbox-zoom.css

Where jquery-colorbox-zoom-left.css contain this :
a.zoomLink {
position: relative;
display: inline-block;
float:left;
}

and where jquery-colorbox-zoom-right.css contain this :
a.zoomLink {
position: relative;
display: inline-block;
float:right;
}

jquery-colorbox-zoom.css still unchanged

??

Hi,
yeah, that’s what I already implemented, but that only solves half the problem.
The image tag has margin and padding applied to it when it’s floating in most themes. Since I can’t place the hover-element into the image (img tag is not allowed to have children) but into the link alongside the image, it’s really only luck if the hovering magnifying glass is placed over the center of the image…

Anyway, I just released version 4.5 where at least the zoom hover doesn’t break floating images any more.

Cheers,
Arne