WordPress.org

Ready to get started?Download WordPress

Forums

jQuery Colorbox
[resolved] Overlay break floating images (4 posts)

  1. pako69
    Member
    Posted 1 year ago #

    Hi,
    All is working nice except if you want to have the nice overlay features on float right or left image : the imaga stop to float...

    Thanks

    http://wordpress.org/extend/plugins/jquery-colorbox/

  2. techotronic
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

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

    Cheers,
    Arne

  3. pako69
    Member
    Posted 1 year ago #

    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

    :-)

  4. techotronic
    Member
    Plugin Author

    Posted 1 year ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.