"Social-network style lightbox"
Bootstrap 3.2.0 Snippet by texh

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="modal img-modal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-md-8 modal-image">
<img class="img-responsive " src="https://images.unsplash.com/photo-1485230895905-ec40ba36b9bc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=60">
<img class="img-responsive hidden" src="http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg" />
<img class="img-responsive hidden" src="http://www.netflights.com/media/216535/hong%20kong_03_681x298.jpg" />
<a href="" class="img-modal-btn left"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a href="" class="img-modal-btn right"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
<div class="col-md-4 modal-meta">
<div class="modal-meta-top">
<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<div class="img-poster clearfix">
<a href=""><img class="img-circle" src="https://s-media-cache-ak0.pinimg.com/736x/3b/7d/6f/3b7d6f60e2d450b899c322266fc6edfd.jpg"/></a>
<strong><a href="">John Doe</a></strong>
<span>12 minutes ago</span>
</div>
<ul class="img-comment-list">
<li>
<div class="comment-img">
<img src="http://lorempixel.com/50/50/people/6">
</div>
<div class="comment-text">
<strong><a href="">Jane Doe</a></strong>
<p>Hello this is a test comment.</p> <span class="date sub-text">on December 5th, 2016</span>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* CSS used here will be applied after bootstrap.css */
html, body { height: 100%;}
/* So that the modal is displayed in the preview.. You can probably remove this and the above rule */
.img-modal {
display: block;
}
.img-modal .modal-dialog {
/* An arbitrary minimum height. Feel free to modify this one as well */
min-height: 350px;
height: 80%;
}
.img-modal .modal-content, .img-modal .modal-body, .img-modal .row, .img-modal .modal-image {
height: 100%;
}
.modal-content {
border-radius: 0;
}
.modal-body {
padding-top: 0;
padding-bottom: 0;
}
.modal-image {
background: #000;
padding :0;
}
.modal-image img {
margin: 0 auto;
max-height: 100%;
max-width: 100%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(function(){
// This code is not even almost production ready. It's 2am here, and it's a cheap proof-of-concept if anything.
$(".img-modal-btn.right").on('click', function(e){
e.preventDefault();
cur = $(this).parent().find('img:visible()');
next = cur.next('img');
par = cur.parent();
if (!next.length) { next = $(cur.parent().find("img").get(0)) }
cur.addClass('hidden');
next.removeClass('hidden');
return false;
})
$(".img-modal-btn.left").on('click', function(e){
e.preventDefault();
cur = $(this).parent().find('img:visible()');
next = cur.prev('img');
par = cur.parent();
children = cur.parent().find("img");
if (!next.length) { next = $(children.get(children.length-1)) }
cur.addClass('hidden');
next.removeClass('hidden');
return false;
})
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

is not working 2019.....

zolin () - 5 years ago - Reply 0


http://www.pimart.eu/wp-con... is a dead link btw, not a big deal, just so you know.

George Langham () - 8 years ago - Reply 0


hi there is a function that I can close that window

WhiteShark () - 9 years ago - Reply 0


hey, im beginner in bootstrap
how to make this lightbox without modal ?

Aan Ardiyana () - 9 years ago - Reply 0


cross button is not working ...

Sunil Sinha () - 9 years ago - Reply 0


This is what I was looking for!! Thanks a ton mate :)

Nasruddin () - 9 years ago - Reply 0


how to make this popup

JD () - 10 years ago - Reply 0


i just come here to read comments.

Leandro Ruel () - 10 years ago - Reply 0


OK

lel () - 10 years ago - Reply 0


We cannot see all comments and add a comment on a smartphone. We can't scroll.

Yujiro () - 10 years ago - Reply 0


Rly Cool!! Thanks!
Hey i miss the "username" in comments

Daniel Malkafly () - 10 years ago - Reply 0


Something like the current version look OK?

texh () - 10 years ago - Reply 0


Hell yeah! Thanks :D

Daniel Malkafly () - 10 years ago - Reply 0


Any chance for a fully-responsive version like Instagram's

G () - 10 years ago - Reply 0


It's responsive isn't it?

George Langham () - 8 years ago - Reply 0


I'm two years late to the party.. I might update this snip one day, but if anyone else was wondering play around with something like

.modal-content {
border-radius: 0;
max-height: 100%;
overflow-y: auto;
}

texh () - 8 years ago - Reply 0