WordPress.org

Forums

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

  1. pako69
    Member
    Posted 2 years 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 2 years ago #

    Hi,

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

    Cheers,
    Arne

  3. pako69
    Member
    Posted 2 years 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 2 years 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

  • jQuery Colorbox
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.