Bootstrap lightbox
it wont display arrows
HTML
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/3.3.0/ekko-lightbox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/3.3.0/ekko-lightbox.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="col-md-4 hiddenimages">
<a data-toggle="lightbox" data-gallery="hiddenimages" data-title="People walking down stairs"
href="http://prueba.ikosweb.com/arqcocun/images/galeria/lagos-sol.JPG"><img src="http://prueba.ikosweb.com/arqcocun/images/galeria/lagos-sol.JPG" class="img-responsive"></a>
<h3>CASA LAGOS DEL SOL</h3>
<p>BARRANCO 2008</p>
<!-- elements not showing, use data-remote -->
<div data-toggle="lightbox" data-gallery="hiddenimages" data-remote="http://prueba.ikosweb.com/arqcocun/images/galeria/lagos-sol1.jpeg"
data-title="Hidden item 1"></div>
<div data-toggle="lightbox" data-gallery="hiddenimages" data-remote="//www.youtube.com/embed/b0jqPvpn3sY"
data-title="Hidden item 2"></div>
<div data-toggle="lightbox" data-gallery="hiddenimages" data-remote="http://distilleryimage2.ak.instagram.com/e3493b0a045411e3a4fb22000a1f97ec_7.jpg"
data-title="Hidden item 3"></div>
<div data-toggle="lightbox" data-gallery="hiddenimages" data-remote="http://distilleryimage10.ak.instagram.com/85c5d0e4039411e3bd9b22000aa82186_7.jpg"
data-title="Hidden item 4"></div>
</div>
JavaScript
$(document).ready(function ($) {
$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
always_show_close: true,
gallery_parent_selector: '.hiddenimages',
});
});
});