"Bootstrap Lightbox"
Bootstrap 3.1.0 Snippet by mouse0270

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="col-xs-6 col-sm-3"> <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> <img src="https://s3.amazonaws.com/ooomf-com-files/lqCNpAk3SCm0bdyd5aA0_IMG_4060_1%20copy.jpg" alt="..."> </a> </div> <div class="col-xs-6 col-sm-3"> <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> <img src="https://s3.amazonaws.com/ooomf-com-files/deYU3EyQP9cN23moYfLw_Dandelion.jpg" alt="..."> </a> </div> <div class="col-xs-6 col-sm-3"> <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> <img src="https://s3.amazonaws.com/ooomf-com-files/8H0UdTsvRFqe03hZkNJr_New%20York%20-%20On%20the%20rock%20-%20Empire%20State%20Building.jpg" alt="..."> </a> </div> <div class="col-xs-6 col-sm-3"> <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> <img src="https://s3.amazonaws.com/ooomf-com-files/Z3LXxzFMRe65FC3Dmhnp_woody_unsplash_DSC0129.jpg" alt="..."> </a> </div> </div> <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="" /> </div> </div> </div> </div>
body { padding: 30px 0px; } #lightbox .modal-content { display: inline-block; text-align: center; } #lightbox .close { opacity: 1; color: rgb(255, 255, 255); background-color: rgb(25, 25, 25); padding: 5px 8px; border-radius: 30px; border: 2px solid rgb(255, 255, 255); position: absolute; top: -15px; right: -55px; z-index:1032; }
$(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); }); $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'); }); });

Related: See More


Questions / Comments:

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.

Katerina Prasol () - 2 years ago - Reply 0


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.

Thomas Wohlgemuth () - 3 years ago - Reply 0


Thanks it works perfectly for me.

jQPlugins Buzz () - 3 years ago - Reply 0


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

Sthran Fagunde () - 3 years ago - Reply 0


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

suraj vs () - 4 years ago - Reply 0


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

Rahul Pareek () - 4 years ago - Reply 0


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

mouse0270 () - 4 years ago - Reply 0


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

baraka () - 4 years ago - Reply 0


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

Carl () - 4 years ago - Reply 0


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?

skald66 () - 4 years ago - Reply 0


anyway to get some opacity on the background?

sean69 () - 4 years ago - Reply 0


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.

deep () - 4 years ago - Reply 0


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

maxsurguy () - 4 years ago - Reply 0


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

Savvanis Spyros () - 4 years ago - Reply 0


[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');
});
});

Kidungonline.com () - 4 years ago - Reply 0


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');
});
});

Kidungonline.com () - 4 years ago - Reply 0


Hi,

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

Theodore DeHart () - 4 years ago - Reply 0


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?

Azamat () - 5 years ago - Reply 0


Done/

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

Azamat () - 5 years ago - Reply 0


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

russell () - 5 years ago - Reply 0


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

Jessica () - 5 years ago - Reply 0


Bullshit because it works with normal standard modals^^

JayNike () - 5 years ago - Reply 0


Do you care to specify what you are talking about?

mouse0270 () - 5 years ago - Reply 0


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.

NM () - 5 years ago - Reply 0


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

mouse0270 () - 5 years ago - Reply 0


Thanks for your help, yea that thing is jumpy.

NM () - 5 years ago - Reply 0


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

mouse0270 () - 5 years ago - Reply 0


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

mouse0270 () - 5 years ago - Reply 0


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

Dino () - 4 years ago - Reply 0