"Modal lightbox with like/dislike"
Bootstrap 3.1.0 Snippet by gutomoraes

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <!-- Reference: https://github.com/ashleydw/lightbox/ --> <script src="//rawgithub.com/ashleydw/lightbox/master/dist/ekko-lightbox.js"></script> <div class="container mt40"> <section class="row"> <article class="col-xs-12 col-sm-6 col-md-3"> <div class="panel panel-default"> <div class="panel-body"> <a href="http://lorempixel.com/350/350/nature/4" title="Nature Portfolio" class="zoom" data-title="Amazing Nature" data-footer="The beauty of nature" data-type="image" data-toggle="lightbox"> <img src="http://lorempixel.com/350/350/nature/4" alt="Nature Portfolio" /> <span class="overlay"><i class="glyphicon glyphicon-fullscreen"></i></span> </a> </div> <div class="panel-footer"> <h4><a href="#" title="Nature Portfolio">Nature</a></h4> <span class="pull-right"> <i id="like1" class="glyphicon glyphicon-thumbs-up"></i> <div id="like1-bs3"></div> <i id="dislike1" class="glyphicon glyphicon-thumbs-down"></i> <div id="dislike1-bs3"></div> </span> </div> </div> </article> <article class="col-xs-12 col-sm-6 col-md-3"> <div class="panel panel-default"> <div class="panel-body"> <a href="http://lorempixel.com/350/350/food/2" title="Food Portfolio" class="zoom" data-title="Delicious Food" data-footer="Whatever your desire" data-type="image" data-toggle="lightbox"> <img src="http://lorempixel.com/350/350/food/2" alt="Food Portfolio" /> <span class="overlay"><i class="glyphicon glyphicon-fullscreen"></i></span> </a> </div> <div class="panel-footer"> <h4><a href="#" title="Food Portfolio">Food</a></h4> <span class="pull-right"> <i id="like2" class="glyphicon glyphicon-thumbs-up"></i> <div id="like2-bs3"></div> <i id="dislike2" class="glyphicon glyphicon-thumbs-down"></i> <div id="dislike2-bs3"></div> </span> </div> </div> </article> <article class="col-xs-12 col-sm-6 col-md-3"> <div class="panel panel-default"> <div class="panel-body"> <a href="http://lorempixel.com/350/350/sports/3" title="Sports Portfolio" class="zoom" data-title="Radical Sports" data-footer="This are the best moments" data-type="image" data-toggle="lightbox"> <img src="http://lorempixel.com/350/350/sports/3" alt="Sports Portfolio" /> <span class="overlay"><i class="glyphicon glyphicon-fullscreen"></i></span> </a> </div> <div class="panel-footer"> <h4><a href="#" title="Sports Portfolio" title="Sports">Sports</a></h4> <span class="pull-right"> <i id="like3" class="glyphicon glyphicon-thumbs-up"></i> <div id="like3-bs3"></div> <i id="dislike3" class="glyphicon glyphicon-thumbs-down"></i> <div id="dislike3-bs3"></div> </span> </div> </div> </article> <article class="col-xs-12 col-sm-6 col-md-3"> <div class="panel panel-default"> <div class="panel-body"> <a href="http://lorempixel.com/350/350/people/1" title="People Portfolio" class="zoom" data-title="Beautiful People" data-footer="We create relationships" data-type="image" data-toggle="lightbox"> <img src="http://lorempixel.com/350/350/people/1" alt="People Portfolio" /> <span class="overlay"><i class="glyphicon glyphicon-fullscreen"></i></span> </a> </div> <div class="panel-footer"> <h4><a href="#" title="People Portfolio">People</a></h4> <span class="pull-right"> <i id="like4" class="glyphicon glyphicon-thumbs-up"></i> <div id="like4-bs3"></div> <i id="dislike4" class="glyphicon glyphicon-thumbs-down"></i> <div id="dislike4-bs3"></div> </span> </div> </div> </article> </section> </div>
@import "http://fonts.googleapis.com/css?family=Roboto:300,400,500,700"; .mt40 { margin-top: 40px; } .panel { position: relative; overflow: hidden; display: block; border-radius: 0 !important; } .panel-default { border-color: #ebedef !important; } .panel .panel-body { position: relative; padding: 0 !important; overflow: hidden; height: auto; } .panel .panel-body a { overflow: hidden; } .panel .panel-body a img { display: block; margin: 0; width: 100%; height: auto; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .panel .panel-body a.zoom:hover img { transform: scale(1.3); -ms-transform: scale(1.3); -webkit-transform: scale(1.3); -o-transform: scale(1.3); -moz-transform: scale(1.3); } .panel .panel-body a.zoom span.overlay { position: absolute; top: 0; left: 0; visibility: hidden; height: 100%; width: 100%; background-color: #000; opacity: 0; transition: opacity .25s ease-out; -moz-transition: opacity .25s ease-out; -webkit-transition: opacity .25s ease-out; -o-transition: opacity .25s ease-out; } .panel .panel-body a.zoom:hover span.overlay { display: block; visibility: visible; opacity: 0.55; -moz-opacity: 0.55; -webkit-opacity: 0.55; filter: alpha(opacity=65); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; } .panel .panel-body a.zoom:hover span.overlay i { position: absolute; top: 45%; left: 0%; width: 100%; font-size: 2.25em; color: #fff !important; text-align: center; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=1); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)"; } .panel .panel-footer { padding: 8px !important; background-color: #f9f9f9 !important; border-bottom-right-radius: 0 !important; border-bottom-left-radius: 0 !important; } .panel .panel-footer h4 { display: inline; font: 400 normal 1.125em "Roboto",Arial,Verdana,sans-serif; color: #34495e margin: 0 !important; padding: 0 !important; } .panel .panel-footer i.glyphicon { display: inline; font-size: 1.125em; cursor: pointer; } .panel .panel-footer i.glyphicon-thumbs-up { color: #1abc9c; } .panel .panel-footer i.glyphicon-thumbs-down { color: #e74c3c; padding-left: 5px; } .panel .panel-footer div { width: 15px; display: inline; font: 300 normal 1.125em "Roboto",Arial,Verdana,sans-serif; color: #34495e; text-align: center; background-color: transparent !important; border: none !important; } .modal-title { font: 400 normal 1.625em "Roboto",Arial,Verdana,sans-serif; } .modal-footer { font: 400 normal 1.125em "Roboto",Arial,Verdana,sans-serif; } /*! * Lightbox for Bootstrap 3 by @ashleydw * https://github.com/ashleydw/lightbox * * License: https://github.com/ashleydw/lightbox/blob/master/LICENSE */.ekko-lightbox-container{position:relative}.ekko-lightbox-nav-overlay{position:absolute;top:0;left:0;z-index:100;width:100%;height:100%}.ekko-lightbox-nav-overlay a{z-index:100;display:block;width:49%;height:100%;padding-top:45%;font-size:30px;color:#fff;text-shadow:2px 2px 4px #000;opacity:0;filter:dropshadow(color=#000000,offx=2,offy=2);-webkit-transition:opacity .5s;-moz-transition:opacity .5s;-o-transition:opacity .5s;transition:opacity .5s}.ekko-lightbox-nav-overlay a:empty{width:49%}.ekko-lightbox a:hover{text-decoration:none;opacity:1}.ekko-lightbox .glyphicon-chevron-left{left:0;float:left;padding-left:15px;text-align:left}.ekko-lightbox .glyphicon-chevron-right{right:0;float:right;padding-right:15px;text-align:right}.ekko-lightbox .modal-footer{text-align:left}
$(document).ready(function() { $('i.glyphicon-thumbs-up, i.glyphicon-thumbs-down').click(function(){ var $this = $(this), c = $this.data('count'); if (!c) c = 0; c++; $this.data('count',c); $('#'+this.id+'-bs3').html(c); }); $(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) { event.preventDefault(); $(this).ekkoLightbox(); }); });

Related: See More


Questions / Comments:

hey, great work!

Is there a way to enable a user like just once please?

edosa () - 2 years ago - Reply 0


Looks like it has potential but definitely does not work.

tazizhere () - 2 years ago - Reply 0


It's completely broken. CSS and JS are not responding. It needs to be re-worked!

Валентин () - 2 years ago - Reply 0


frame jumps while opening the image, cool anyway.

Tuga () - 3 years ago - Reply 0


how to insert this file in another html file?

k132055 () - 3 years ago - Reply 0


Please resolve the issue js script is not working here we we click on the modal is working in your website but not the same files if taken out so cross check before you put coding solve as soon as possible.its not at all working

Shoba Lekkala () - 3 years ago - Reply 0


not work

Supi () - 4 years ago - Reply 0


not work =(

hoooka () - 4 years ago - Reply 0


What exactly ?

maxsurguy () - 4 years ago - Reply 0


plz help me
popup not work

hoooka () - 4 years ago - Reply 0


popup.......when click on photo not show in popup

hoooka () - 4 years ago - Reply 0


Javascript is not work on hover the window

Ali Azgar () - 4 years ago - Reply 0


nice

raza () - 4 years ago - Reply 0


hi,Why not give Liked icons like?

isan () - 4 years ago - Reply 0


Hey this is good work you guys are doing. Thanks a milli. How do I download the snippets?

Brian Nyagol () - 5 years ago - Reply 0


When you are logged in click on the cog wheel when viewing the snippet and you will see the icon to download the snippet!

maxsurguy () - 5 years ago - Reply 0


I got it. Thanks again. :-)

Brian Nyagol () - 5 years ago - Reply 0


Thank you much.

Brian Nyagol () - 5 years ago - Reply 0


need to add http: to the js script file its an error on the page. great1 Tnx!

Ron Belson () - 5 years ago - Reply 0


Thank you .. save my life !

Musharraf Khan () - 3 years ago - Reply 0


not work scrip in tag <script>

saeed () - 5 years ago - Reply 0


how to use script? how to write in code?

saeed () - 5 years ago - Reply 0


How can I set persistent likes and dislikes?

lucas () - 5 years ago - Reply 0


You would have to store them in a database...

maxsurguy () - 5 years ago - Reply 0


like it. thanks for the effort

Calvin Tam () - 5 years ago - Reply 0


Friend js not work

Dacf94 () - 5 years ago - Reply 0