[Plugin: Lightbox 2] Reduce top padding of lightbox (image inside) (4 posts)

  1. Jakets
    Posted 6 years ago #

    I am trying to reduce the spacing between where Lightbox loads and the top of the browser display. With large images it loads up and then the part with the info and close button loads underneath the bottom of the display and you have to scroll down to see it. I have included an image to help understand what I am saying. I have looked in the css for the white theme and cannot figure out what one it is (if its even in there).




  2. seanhart
    Posted 6 years ago #

    You've probably figured it out already but in case you haven't (or for anyone else interested) you need to change the following line in lightbox.js:

    this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();

    to something along the lines of:

    this.lightbox.setStyle({ top: '10px', left: lightboxLeft + 'px' }).show();

    In this case the top padding will be 10px.

  3. evaporate
    Posted 5 years ago #

    I'm fairly certain that code is outdated. It should be:

    setTop: function(element,t) {
    element = $(element);
    element.style.top = t + "px";}

    Where you replace t + "px"; with "10px;".

    However, the problem with this is if you have a gallery, and you open the lightbox by clicking an image at the bottom of the page, the lightboxed-image will open at exactly 10px; from the top (a fixed position).

    Is there any way to make the lightbox "follow along" as the user scrolls down the page, while reducing the padding?

  4. bogusnoise
    Posted 5 years ago #

    Well, you've probably also figured it out already, but I'm also posting this for future searchers - I just found this page in a Google search while trying to fix it, and it guided me to the right line at least!
    It might be a bit of a hack, but hard coding a subtraction into the relevant line posted above sorted it out for me. Worked in Firefox and IE8 so far.

    this.lightbox.setStyle({ top: (lightboxTop-50) + 'px', left: lightboxLeft + 'px' }).show();

Topic Closed

This topic has been closed to new replies.

About this Topic