There is that problem, when you refresh page it shifts left on 15px. Don`t know why. I`ve tried to fix it, but it just does`t work.

Maybe a little late, but i hope i can help with this little snippet.

First of all, thanks for your snippets.
To get rid of this jumpy thing on displaying your Images you must get the naturalwidth of the element you want to display before you've clicked on it and set the modal- dialog to exact this size.
I haven't found a way to get the naturalwidth of the image with jquery so i used a little hybrid here:

$('[data-target="#myModal"]').on('mouseover', function(event) {
var $img = $(this).find('img')
$lightbox.find('.modal-dialog').css({'width': document.getElementById($img.attr('id')).naturalWidth});
$lightbox.find('.modal-dialog').css({'max-width': '100%'});
});

You don't need this max-width code but, in my application i must switch it on shown/ hide occasions of the modal.
Maybe you also need to get the original width and max- width restored, then you just change it back to normal on "hidden.bs.modal" like:

$lightbox.on('hidden.bs.modal', function (e) {
$lightbox.find('.modal-dialog').css({ 'width': 'auto' });
$lightbox.find('.modal-dialog').css({ 'max-width': '600px' });
});

I hope it helps.

Thanks it works perfectly for me.

Como que coloca o avançar na imagem? Se alguem puder me ajudar agradeço.

This is great, Could you fix the image height problem ?

hello,
i apply this lightbox but when i open it then images are not showing . please respond

I would need to see an example to identify the issue.

can i save the js data in a separate file then link it by use <script src="js/gallery.js"></script> to my page...??

http://www.goodwillsa.org/p... shows me junk characters

Nice job on this. What modifications would be needed to allow for a pass-through of caption text (or the Alt text) to the modal?

anyway to get some opacity on the background?

hi, i tried implementing it but its not working.
can any1 tell me what all files & links to be include for lightbox?
Thanks in advance.

If you are a registered user you can download the whole snippet by clicking on the cog wheel icon.

how can i open the lightbox with the image and text?

[How to open image and text] - Just modified the script as showed below..

$(document).ready(function() {
var $lightbox = $('#lightbox');

$('[data-target="#lightbox"]').on('click', function(event) {
var $link = $('#myGallery').find('a'), ---> example add another ID
link = $link.attr('href'); -----> Find the href
var $img = $(this).find('img'),
src = $img.attr('src'),
alt = $img.attr('alt'),
css = {
'maxWidth': $(window).width() - 100,
'maxHeight': $(window).height() - 100
};

$lightbox.find('.close').addClass('hidden');
$lightbox.find('img').attr('src', src);
$lightbox.find('img').attr('alt', alt);
$lightbox.find('img').css(css);
$lightbox.find('a').attr('href', link); ------- >Showed the link
});

and then..
<div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-content">
<div class="modal-body">
<img src="" alt=""/>
Open in a new tab -------------> add a new link to lightbox
</div>
</div>
</div>
</div>

$lightbox.on('shown.bs.modal', function (e) {
var $img = $lightbox.find('img');

$lightbox.find('.modal-dialog').css({'width': $img.width()});
$lightbox.find('.close').removeClass('hidden');
});
});

Sorry made a mistake.. it should be

$(document).ready(function() {
var $lightbox = $('#lightbox');

$('[data-target="#lightbox"]').on('click', function(event) {
var $img = $(this).find('img'),
src = $img.attr('src'),
alt = $img.attr('alt'),
css = {
'maxWidth': $(window).width() - 100,
'maxHeight': $(window).height() - 100
};

$lightbox.find('.close').addClass('hidden');
$lightbox.find('img').attr('src', src);
$lightbox.find('img').attr('alt', alt);
$lightbox.find('img').css(css);
});

$('#myGallery .col-md-2').on('click', function(event) { ---> add another click event
var $link = $(this).find('a'),
link = $link.attr('href');
$lightbox.find('a').attr('href', link);
});

$lightbox.on('shown.bs.modal', function (e) {
var $img = $lightbox.find('img');

$lightbox.find('.modal-dialog').css({'width': $img.width()});
$lightbox.find('.close').removeClass('hidden');
});
});

Hi,

Works great. Is there a way to let the use click thought the images like in a slide show?

Hello. Thank you for your code!

I used it and gallery watks perfectly but the defalt buttons stoped working.

Im new in bootstrap and I think I made mistake here in the head:\

<script src="js/jquery-1.11.0.min.js"></script> \I downloded it from somewhere
<script src="js/lightbox.js"></script> \ this is yours script
<script src="js/bootstrap.min.js"></script>\ standrad
<link href="css/shift.css" rel="stylesheet"> \ standrad - it came with template I use
<link href="main.css" rel="stylesheet"> this is my css

When I delete first line the buttons works and gallery stops working...
what to do?

Done/

The problem was this /data-toggle="modal"/ - part of button code that did not work.

a fabulous site..... magnificent collections ..... it helped me a lot, thanks a lot guys, brilliant job ...

I have been looking for codes that would work with bootstrap carousel and with lightbox ability. Your code works perfect!! Thank you for sharing!

Bullshit because it works with normal standard modals^^

Do you care to specify what you are talking about?

This is great, however, can you add an "X" icon at top right so the user knows how to close the photo? Usability testing shows not many people know to click off the photo in order to close it.

Added the close button. I wish it wasnt so jumpy, but for 23 lines of js, it can't be helped.

Thanks for your help, yea that thing is jumpy.

Cheated and found a way to make it look a little less jumpy with only one more like of JavaScript

I can see what I can do to make it less jumpy... but its going to be more JS

Hi Could you fix the jump? its terrible :-/