WordPress.org

Ready to get started?Download WordPress

Forums

jQuery Colorbox
[closed] Colorbox opens low in the screen, not in the center (10 posts)

  1. markeps
    Member
    Posted 10 months ago #

    Hello, your plugin works great but for some reason when you click on an image the colorbox opens at the bottom on the page and you have to scroll down to view the image. Any idea why this is happening?

    http://www.markepsteinphoto.com/blog

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

  2. DominikaMars
    Member
    Posted 8 months ago #

    I have the EXACT same problem on my website. I have tried many lightbox plugins now and the result is still the same.

    I guess it must be a problem with my theme, but I have no idea what it is.

    Any help?

  3. soulburner
    Member
    Posted 7 months ago #

    I have the same problem. Please share your solutions, if found!

    edit - funny thing is... it works ok with Internet Explorer 11 only :D

  4. jarmerson
    Member
    Posted 3 months ago #

    I am experiencing the exact issues as referenced above. Anything using the jQuery Colorbox for handling lightboxes does the same thing, opens too low in the page / overlaps bottom edge of screen.

    I've tried removing ALL stylesheets, other plugins without any luck. This is on a MultiSite and plenty of other sites using this in the same manner have no issues. I cannot figure this out :/

    Example site: http://paintsolutionsky.com/photos/

    Any insight is greatly appreciated.

  5. MicHelmsJr
    Member
    Posted 3 months ago #

    I saw this issue in Chrome.

    I fixed it by changing the template's header.php file. The first line was:
    <!DOCTYPE htm<?php language_attributes(); ?>l>

    It worked fine once I changed the line to:
    <!DOCTYPE HTML>

  6. jarmerson
    Member
    Posted 3 months ago #

    Did you see this on your site? On ours the header starts with <html <?php language_attributes(); ?>> and doesn't affect the site at all.

    Your markup would obviously need addressed as you have the php tag between the m and l of html.

    I still can't get it working

  7. MicHelmsJr
    Member
    Posted 3 months ago #

    jQuery NEEDS <!DOCTYPE HTML> in order to render $(window).height() properly. $(window).height() is what ColorBox uses to determine the vertical center of the view-port. If <!DOCTYPE HTML> isn't present $(window).height() is equal to $(document).height() which is NOT what you want to have happening on pages that scroll.

    Add <!DOCTYPE HTML> as the first line above that <html <?php language_attributes(); ?>> tag and see if that helps.

    i.e.:

    <!DOCTYPE HTML>
    <html <?php language_attributes(); ?>>
  8. jarmerson
    Member
    Posted 3 months ago #

    I see. Learn something new haha.

    That did the trick! It also revealed that I have to declare the size in CSS for things like top

    top:10;

    doesn't work anymore with that doc dec.

    top:10px;

    does...

  9. marbadik
    Member
    Posted 2 months ago #

    Hello, I have the same problem but i did not understand from the previous posts how to fix it. Try to check some pictures here:

  10. esmi
    Forum Moderator
    Posted 2 months ago #

    If you require assistance then, as per the Forum Welcome, please post your own topic instead of tagging onto someone else's topic.

    I am now closing this 8 month old topic as it references an older version of WordPress.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic