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

  1. markeps
    Posted 2 years 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?



  2. DominikaMars
    Posted 2 years 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
    Posted 2 years 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. Jarod Thornton
    Posted 2 years 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
    Posted 2 years 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:

  6. Jarod Thornton
    Posted 2 years 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
    Posted 2 years 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.


    <html <?php language_attributes(); ?>>
  8. Jarod Thornton
    Posted 2 years 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


    doesn't work anymore with that doc dec.



  9. marbadik
    Posted 2 years 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 years 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

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

About this Topic