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

<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> </li> <li> <div class="comment-img"> <img src="http://lorempixel.com/50/50/people/7"> </div> <div class="comment-text"> <strong><a href="">Jane Doe</a></strong> <p>Hello this is a test comment and this comment is particularly very long and it goes on and on and on.</p> <span>on December 5th, 2016</span> </div> </li> <li> <div class="comment-img"> <img src="http://lorempixel.com/50/50/people/9"> </div> <div class="comment-text"> <strong><a href="">Jane Doe</a></strong> <p class="">Hello this is a test comment.</p> <span class="date sub-text">on December 5th, 2016</span> </div> </li> </ul> </div> <div class="modal-meta-bottom"> <input type="text" class="form-control" placeholder="Leave a commment.."/> </div> </div> </div> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div> <p class="text-center text-muted">Updated Dec. 5th 2016 with basic responsive styles</p>
/* 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%; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .img-modal .img-modal-btn { display: block; position: absolute; top: 0; bottom: 0; background: black; opacity: 0; font-size: 1.5em; width: 45px; color: #fff; transition: opacity .2s ease-in; } .img-modal .modal-image:hover .img-modal-btn { opacity: 0.4; } .img-modal .modal-image:hover .img-modal-btn:hover { opacity: 0.75; } .img-modal .img-modal-btn.right { right: 0; } .img-modal .img-modal-btn i { position: absolute; top: 50%; left: 0; right: 0; text-align: center; margin-top: -.75em; } .img-modal .modal-meta { position: relative; height: 100%; } .img-modal .modal-meta-top { position: absolute; top: 0; left: 0; right: 0; bottom: 45px; padding: 5px 10px; overflow-y: auto; } .img-modal .modal-meta-top .img-poster img { height: 70px; width: 70px; float: left; margin-right: 15px; } .img-modal .modal-meta-top .img-poster strong { display: block; padding-top: 15px; } .img-modal .modal-meta-top .img-poster span { display: block; color: #aaa; font-size:.9em; } .img-modal .modal-meta-bottom { position: absolute; bottom: 0; left: 0; right: 0; padding: 5px; border-top: solid 1px #ccc; } .img-modal .img-comment-list { list-style: none; padding: 0; } .img-modal .img-comment-list li { margin:0; margin-top:10px; } .img-modal .img-comment-list li > div { display:table-cell; } .img-modal .img-comment-list img { border-radius:50%; width: 42px; height: 42px; margin-right: 10px; margin-top: 20px; } .img-modal .img-comment-list p { margin: 0; } .img-modal .img-comment-list span { font-size: .8em; color: #aaa; } @media only screen and (max-width : 992px) { .modal-content { border-radius: 0; max-height: 100%; overflow-y: auto; } .img-modal .modal-image { height: calc(100% - 100px); } .img-modal .modal-meta { height: auto; } .img-modal .modal-meta-top { position: static; padding-top: 15px; } .img-modal .modal-meta-bottom { position: static; margin: 0 -15px; } }
$(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; }) });

Related: See More


Questions / Comments:

is not working 2019.....

zolin () - 4 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 () - 7 years ago - Reply 0


hi there is a function that I can close that window

WhiteShark () - 8 years ago - Reply 0


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

Aan Ardiyana () - 8 years ago - Reply 0


cross button is not working ...

Sunil Sinha () - 8 years ago - Reply 0


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

Nasruddin () - 8 years ago - Reply 0


how to make this popup

JD () - 9 years ago - Reply 0


i just come here to read comments.

Leandro Ruel () - 9 years ago - Reply 0


OK

lel () - 9 years ago - Reply 0


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

Yujiro () - 9 years ago - Reply 0


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

Daniel Malkafly () - 9 years ago - Reply 0


Something like the current version look OK?

texh () - 9 years ago - Reply 0


Hell yeah! Thanks :D

Daniel Malkafly () - 9 years ago - Reply 0


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

G () - 9 years ago - Reply 0


It's responsive isn't it?

George Langham () - 7 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 () - 7 years ago - Reply 0