Hello, I have problem with lightbox overlay on my web page. It works fine in IE, FF, but in Chrome sometimes didn´t apper. I read all this issues, but I didnť find the solution. I tested it with the F12 console and it seems everything OK. The "display: none" and "display: block" changes how should. In the case, that overlay isn´t visible, it just change size of the window, or move mouse in the console over different div and this "refreshing" of page will appear the overlay. Can you help me please?

P.S. I had a problem with overlay too, that its hight wasn´t over whole page, but I fixed it, when I change overlay position from absolute to fixed in css. Do you think, it is some relationship between this bugs?

Hello,

Is it possible to add video content to lightbox? Then you can play a video with overlay and you can see the video's between the pictures? I think this would be a huge advantage for lightbox.

Best regards, Kris Thienpont

Hi, i tried to use lightbox2 with jQuery 1.9.0 and it not show images, just create the overlayBackgound..

I changed some lines and make it work.

jQuery.fn.attr() is deprecated and not exists in jQuery 1.9.0. But the solution is simple, just change any

$obj.attr('...')

for

$obj.prop('...')

The second and last change is the way you create de DOM Elements. In build function just change:

$("<div>", {
        id: 'lightboxOverlay'
      }).after($('<div/>', {
        id: 'lightbox'
      }).append($('<div/>', {
        "class": 'lb-outerContainer'
      }).append($('<div/>', {
        "class": 'lb-container'
      }).append($('<img/>', {
        "class": 'lb-image'
      }), $('<div/>', {
        "class": 'lb-nav'
      }).append($('<a/>', {
        "class": 'lb-prev'
      }), $('<a/>', {
        "class": 'lb-next'
      })), $('<div/>', {
        "class": 'lb-loader'
      }).append($('<a/>', {
        "class": 'lb-cancel'
      }).append($('<img/>', {
        src: this.options.fileLoadingImage
      }))))), $('<div/>', {
        "class": 'lb-dataContainer'
      }).append($('<div/>', {
        "class": 'lb-data'
      }).append($('<div/>', {
        "class": 'lb-details'
      }).append($('<span/>', {
        "class": 'lb-caption'
      }), $('<span/>', {
        "class": 'lb-number'
      })), $('<div/>', {
        "class": 'lb-closeContainer'
      }).append($('<a/>', {
        "class": 'lb-close'
      }).append($('<img/>', {
        src: this.options.fileCloseImage
      }))))))).appendTo($('body'));

for:

$("<div id='lightboxOverlay'></div><div id='lightbox'><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' ><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'><img src='" + this.options.fileLoadingImage + "'></a></div></div></div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'><img src='" + this.options.fileCloseImage + "'></a></div></div></div></div>").appendTo($('body'));

I forked your project but don't know coffeescript and don't want to mess up your project.. I Hope it help you someway.. Thanks

I used your tutorial and got ligthbox2 to work on my website. However, it loads my last image first. So when I click on the link it will start at image 4 of 4. I have read other posts with this issue, but am having a hard time making sense of them. I have attached an image of my code, can you help me out?

Hi,

as far as i can get from the code the lightbox is currently positioned like this:

top = $window.scrollTop() + $window.height() / 10;

so at a certain position from the top of the current position. Is there a way to display the lightbox centered in the window. And also center it again on image change (otherwise if the new image has a different height it won't be centered anymore).

I tried working it out but did not get to change it. Would appreciate any help! Best, Pascal

The image loads and everything is fine. But my users would like to be able to save the image after it loads (some other scripts allow right clicking, dragging the image, etc.). Is there anyway to add this feature to this?

Until then can't use it :(.

Why does clicking the image to open the modal scrolls the page to the top when disableScrolling is true?

To produce the following bug, go to Lightbox Examples, open the console, and enter the following.

lightbox.option({ disableScrolling: true });

Then before clicking an image, scroll so that you're not at the top of the page but you should still see the image (so you could click it tho).

After clicking, you can see that the modal opens but the page scrolls up, leaving the modal down there! Are there other things that I should do when implementing disableScrolling?

Hey

I like the lightbox you have created! I am working on using the correct code to add this to my child theme functions.php file. It would be great to have it work with WordPress. I will also add it to my article on using lightboxes without using a plugin: http://easywebdesigntutorials.com/adding-a-lightbox-to-wordpress-without-using-a-plugin/ (An article still being shaped.)

What I got right now based on earlier code used with Colorbox, Nivo and Fluidbox (more or less functioning. It looks best with Colorbox. Not that the site is working with it right now though. I am creating an update that I will add onto the site).

I want to get it working with Lightbox 2. It would also help whomever else is looking for the same thing.

What is off with the following code? Could you add the code to get it working with WordPress? Btw are there some settings on can adjust to customize the lightbox further?

wp_enqueue_style( 'lightbox2-css', get_bloginfo( 'stylesheet_directory' ) . '/lightbox2/css/lightbox.css', array(), CHILD_THEME_VERSION );

wp_enqueue_script( 'lightbox2', get_bloginfo( 'stylesheet_directory' ) . '/lightbox2/js/lightbox.min.js', array( 'jquery' ), '2.7.1' );

wp_enqueue_script( 'lightbox2-init',  get_stylesheet_directory_uri() . '/lightbox2/lightbox2-init.js', array( 'lightbox2' ), '1.0.0', true );

}

I then made the init.js file:

Have a great day!

When the height of my window is large enough this appears:

When I change left to: -10000px then it disappears. I don't know the codebase well enough to know if it causes other problems but appears to work.

When using an imageset the left and right navigation arrows don't show in IE8/9/10 unless you move the mouse over the thin border around the lightbox first. You can see the behavior using the examples on your site. Pick an image from the imageset then quickly move the mouse into the lightbox. If you move it quick enough the navigation won't appear. If you move it slow enough over the border they will appear. If it appears and you move the mouse over to opposite side, that navigation won't appear and both are gone now and won't re-appear unless you hover over the lightbox border.

Firefox and Chrome work as expected.

I'm using Lightbox on Moodle 3. When opening images with the gallery open, the right half of images is covered up with a solid pink color. If I mouseover the pink area, the whole image becomes visible. When the mouse pointer is moved outside the right half of the image, the pink cover returns, and only the left half of the image is visible. Is this a known bug?

🐛 Github issues is for bugs only. No feature requests or support tickets please.

Trouble using Lightbox?

1. Search Stackoverflow to see if other people have run into similar issues.
2. If you don't find anything similar, then post a new question on Stackoverflow. Use the lightbox2 tag.

Have a Feature Request?

1. Search through existing Github Issues and PRs to see if the feature has been discussed or already created.
2. If not, search Stackoverflow to see if other people have made similar requests.
3. If your feature request is unique, then post a new question on Stackoverflow. Use the lightbox2 tag.

View the project Roadmap.

Found a Bug?

Search through existing Github Issues that have been reported to avoid creating a duplicate issue. If your bug has not been reported, create a new issue with the following details:

What version of Lightbox2 you are using?

Which browsers and operating systems have you seen the issue on?

What are the steps to reproduce the bug?

Do you have link to a live site where the bug is visible? or can you post relevant HTML, CSS, and Javascript?

Hi, I spotted that lightbox will simply not work, when using lightbox-plus-jquery.js file. The console gives the error: Uncaught SyntaxError: Unexpected end of input lightbox-plus-jquery.js:9980 When used lightbox-plus-jquery.min.js then all is fine.

What version of Lightbox2 you are using?

I am using v2.11.3.

Which browsers and operating systems have you seen the issue on?

Chrome Version 105.0.5195.102 (Official Build) (64-bit) Windows 10 Enterprise

What are the steps to reproduce the bug?

Just use lightbox-plus-jquery.js and check the console in Chrome.

Do you have link to a live site where the bug is visible? or can you post relevant HTML, CSS, and Javascript?

No.

What version of Lightbox2 you are using? 2.11.3 (latest)

Which browsers and operating systems have you seen the issue on?

• Google Chrome
• Microsoft Edge

What are the steps to reproduce the bug? If lightbox2 is used and image data-titles contain unsafe characters such as JS or HTML code, the code will later be executed in the browser if the image is overlayed on the page. Problem is a lack of sanitization when the title is embedded into the "lb-caption" class HTML span object. This might be introduced by file upload functions when the file name is set as title and not properly sanitized.

The issue was identified in a project that uses lightbox2 for image overlaying. Please see https://github.com/drakkan/sftpgo/issues/981#issuecomment-1244116517 for more information.

Do you have link to a live site where the bug is visible? or can you post relevant HTML, CSS, and Javascript? https://codesandbox.io/s/lightbox2-demo-forked-vh88tp

when this option is true, image vertically center in any screen

Pull Requests are welcome. But v2 of Lightbox is in Maintenance Mode. No new features are planned. See the Roadmap.

PRs submitted will still be reviewed and kept open for others to utilize.