"Présention forum média facebook"
Bootstrap 3.2.0 Snippet by Asriiel

<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://img4.hostingpics.net/pics/800919snapshot20170125214047.jpg"> <img class="img-responsive hidden" src="http://img4.hostingpics.net/pics/898439snapshot20170213212722.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="http://img4.hostingpics.net/pics/460121Asrii3.png"/></a> <strong><a href="#">Shiina</a></strong> <span>12 minutes ago</span> </div> <ul class="img-comment-list"> <li> <div class="comment-img"> <img src="http://img4.hostingpics.net/pics/734324RintsuIcon.png"> </div> <div class="comment-text"> <strong><a href="#">Rintsu</a></strong> <p>Blablabla</p> <span>4 mars, 15h20</span> </div> </li> <li> <div class="comment-img"> <img src="http://img4.hostingpics.net/pics/460121Asrii3.png"> </div> <div class="comment-text"> <strong><a href="#">Shiina</a></strong> <p>Blablabla</p> <span>4 mars, 15h30</span> </div> </li> <li> <div class="comment-img"> <img src="http://img4.hostingpics.net/pics/17936420170228100935.jpg"> </div> <div class="comment-text"> <strong><a href="">Chips</a></strong> <p>Blablabla</p> <span class="date sub-text">4 mars, 15h40</span> </div> </li> </ul> </div> <div class="modal-meta-bottom"> <input type="text" class="form-control" placeholder="Laisse un commentaire ..."/> </div> </div> </div> </div> </div> </div> </div>
.img-modal { display: block; } .img-modal .modal-dialog { min-height: 350px; height: 80%; } .img-modal .modal-content, .img-modal .modal-body, .img-modal .row, .img-modal .modal-image { height: 100%; } .modal-content { } .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%); } .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; } .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 { width: 42px;height: 42px;margin-right: 10px;margin-top: 20px;border-radius:50%; } .img-modal .img-comment-list p { margin: 0; } .img-modal .img-comment-list span { font-size: .8em;color: #aaa; }
$(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: