Bootstrap Snippet Social-network style lightbox using HTML CSS Bootstrap jQuery

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="http://www.made-in-italy.com/files/imagecache/lg/pictures/travel-to-italy/news/2013/02/george-clooney-omega-testimonial-1.jpg">
            <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

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

Related: See More

Questions / Comments:

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

Related: See More

Questions / Comments:

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