<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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-fluid"> <div class="row form-group"> <div class="col-xs-12 col-sm-12 col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Toggle 1</h3> </div> <div class="panel-image"> <span data-imgsrc="https://img-9gag-fun.9cache.com/photo/a4G43Ld_700b.jpg" class="panel-image-preview" ></span> <label data-toggle="modal" data-target="#toggle-1"></label> </div> <div class="panel-footer text-center"> <a href="#download"><span class="glyphicon glyphicon-download"></span></a> <a href="#facebook"><span class="fa fa-facebook"></span></a> <a href="#twitter"><span class="fa fa-twitter"></span></a> <a href="#share"><span class="glyphicon glyphicon-share-alt"></span></a> </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Toggle 2</h3> </div> <div class="panel-image hide-panel-body"> <span data-imgsrc="https://img-9gag-fun.9cache.com/photo/a6VwZXq_700b.jpg" class="panel-image-preview" ></span> <label data-toggle="modal" data-target="#toggle-2"></label> </div> <div class="panel-footer text-center"> <a href="#download"><span class="glyphicon glyphicon-download"></span></a> <a href="#facebook"><span class="fa fa-facebook"></span></a> <a href="#twitter"><span class="fa fa-twitter"></span></a> <a href="#share"><span class="glyphicon glyphicon-share-alt"></span></a> </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Toggle 3</h3> </div> <div class="panel-image hide-panel-body"> <span data-imgsrc="https://img-9gag-fun.9cache.com/photo/a5ndX5o_700b.jpg" class="panel-image-preview" ></span> <label data-toggle="modal" data-target="#toggle-3"></label> </div> <div class="panel-footer text-center"> <a href="#download"><span class="glyphicon glyphicon-download"></span></a> <a href="#facebook"><span class="fa fa-facebook"></span></a> <a href="#twitter"><span class="fa fa-twitter"></span></a> <a href="#share"><span class="glyphicon glyphicon-share-alt"></span></a> </div> </div> </div> </div> <div class="row form-group"> <div class="col-xs-12 col-sm-12 col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Toggle 4</h3> </div> <div class="panel-image hide-panel-body"> <span data-imgsrc="https://img-9gag-fun.9cache.com/photo/av708OO_700b.jpg" class="panel-image-preview" ></span> <label data-toggle="modal" data-target="#toggle-4"></label> </div> <div class="panel-footer text-center"> <a href="#download"><span class="glyphicon glyphicon-download"></span></a> <a href="#facebook"><span class="fa fa-facebook"></span></a> <a href="#twitter"><span class="fa fa-twitter"></span></a> <a href="#share"><span class="glyphicon glyphicon-share-alt"></span></a> </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Toggle 5</h3> </div> <div class="panel-image"> <span data-imgsrc="https://img-9gag-fun.9cache.com/photo/aY4bo6q_700b.jpg" class="panel-image-preview" ></span> <label data-toggle="modal" data-target="#toggle-5"></label> </div> <div class="panel-footer text-center"> <a href="#download"><span class="glyphicon glyphicon-download"></span></a> <a href="#facebook"><span class="fa fa-facebook"></span></a> <a href="#twitter"><span class="fa fa-twitter"></span></a> <a href="#share"><span class="glyphicon glyphicon-share-alt"></span></a> </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Toggle 6</h3> </div> <div class="panel-image"> <span data-imgsrc="https://img-9gag-fun.9cache.com/photo/aoOzM2X_700b.jpg" class="panel-image-preview" ></span> <label data-toggle="modal" data-target="#toggle-6"></label> </div> <div class="panel-footer text-center"> <a href="#download"><span class="glyphicon glyphicon-download"></span></a> <a href="#facebook"><span class="fa fa-facebook"></span></a> <a href="#twitter"><span class="fa fa-twitter"></span></a> <a href="#share"><span class="glyphicon glyphicon-share-alt"></span></a> </div> </div> </div> </div> </div> <!-- MODALS START --> <div id="toggle-1" class="modal fade 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 src="https://img-9gag-fun.9cache.com/photo/a4G43Ld_700b.jpg" class="img-responsive panel-image-preview"> </div> <div class="col-md-4 modal-meta"> <div class="modal-meta-top"> <button type="button" class="close" data-dismiss="modal"><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> <div id="toggle-2" class="modal fade 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 src="https://img-9gag-fun.9cache.com/photo/a6VwZXq_700b.jpg" class="img-responsive panel-image-preview"> </div> <div class="col-md-4 modal-meta"> <div class="modal-meta-top"> <button type="button" class="close" data-dismiss="modal"><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> <div id="toggle-3" class="modal fade 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 src="https://img-9gag-fun.9cache.com/photo/a5ndX5o_700b.jpg" class="img-responsive panel-image-preview"> </div> <div class="col-md-4 modal-meta"> <div class="modal-meta-top"> <button type="button" class="close" data-dismiss="modal"><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> <div id="toggle-4" class="modal fade 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 src="https://img-9gag-fun.9cache.com/photo/av708OO_700b.jpg" class="img-responsive panel-image-preview"> </div> <div class="col-md-4 modal-meta"> <div class="modal-meta-top"> <button type="button" class="close" data-dismiss="modal"><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> <div id="toggle-5" class="modal fade 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 src="https://img-9gag-fun.9cache.com/photo/aY4bo6q_700b.jpg" class="img-responsive panel-image-preview"> </div> <div class="col-md-4 modal-meta"> <div class="modal-meta-top"> <button type="button" class="close" data-dismiss="modal"><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> <div id="toggle-6" class="modal fade 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 src="https://img-9gag-fun.9cache.com/photo/aoOzM2X_700b.jpg" class="img-responsive panel-image-preview"> </div> <div class="col-md-4 modal-meta"> <div class="modal-meta-top"> <button type="button" class="close" data-dismiss="modal"><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> <!-- MODALS END -->

@import url("https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"); .container-fluid{ margin: 10%; } .panel-image { position: relative; } .panel-image img.panel-image-preview { width: 100%; border-radius: 4px 4px 0px 0px; background: rgb(0,0,0); background-repeat: no-repeat; background-size: contain; background-position: center; min-height: 500px; max-height: 500px; } .panel-image label { cursor: pointer; display: block; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; } .panel-heading ~ .panel-image img.panel-image-preview { border-radius: 0px; } .panel-heading { background-color: transparent !important; } .panel-body { overflow: hidden; } .panel-image ~ input[type=checkbox] { position:absolute; top:- 30px; z-index: -1; } .panel-image ~ input[type=checkbox] ~ .panel-body { height: 0px; padding: 0px; } .panel-image ~ input[type=checkbox]:checked ~ .panel-body { height: auto; padding: 15px; } .panel-image ~ .panel-footer a { padding: 0px 10px; font-size: 1.3em; color: rgb(100, 100, 100); } /* CSS used here will be applied after bootstrap.css */ html, body { height: 100%;} .img-modal .modal-dialog { /* An arbitrary minimum height. Feel free to modify this one as well */ min-height: 350px; height: 80%; width: 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; margin-left:-10px } .modal-image { background: #000; padding :0; } .modal-image img { cursor: pointer; 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% - 35%); } .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; } }

$(document).ready(function() { $('span[data-imgsrc]').each(function(){ var imgsrc = $(this).data('imgsrc'); $(this).after('<img style="background-image: url('+imgsrc+')" class="panel-image-preview" />'); //$(this).css("background-image", "url('" + imgsrc + "')"); //$(this).remove(); }); }); $(document).on('click','.panel-image label',function(){ var elm = $(this).data('target'); var img = new Image(); img.onload = function() { $(elm+' .modal-lg').height(this.height); } img.src = $(this).closest('.panel-image').find('span').data('imgsrc'); });