<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="jumbotron text-center" style="margin-bottom:0; background-color: #FBFCFF;"> <div class="container"> <div class="row"> <div class="col-sm-12"> <h1>Portafolio</h1> <hr class="my-4"> <div align="center"> <button class="btn btn-primary active filter-button" data-filter="todo">Todo</button> <button class="btn btn-primary filter-button" data-filter="retratos">Retratos</button> <button class="btn btn-primary filter-button" data-filter="paisajes">Paisajes</button> <button class="btn btn-primary filter-button" data-filter="disenos">Diseños</button> <div class="row"> <div class="row"> <div class="col-lg-3 col-md-4 col-xs-6 thumb filter retratos"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="" data-image="https://images.pexels.com/photos/50631/pexels-photo-50631.jpeg?cs=srgb&dl=aerial-bridge-buildings-50631.jpg&fm=jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="https://images.pexels.com/photos/50631/pexels-photo-50631.jpeg?cs=srgb&dl=aerial-bridge-buildings-50631.jpg&fm=jpg" alt="Retratos"> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb filter retratos"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="" data-image="https://images.pexels.com/photos/34629/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" data-target="#image-gallery"> <img class="img-thumbnail" src="https://images.pexels.com/photos/34629/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Retratos"> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb filter retratos"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="" data-image="https://images.pexels.com/photos/698885/pexels-photo-698885.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" data-target="#image-gallery"> <img class="img-thumbnail" src="https://images.pexels.com/photos/698885/pexels-photo-698885.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Retratos"> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb filter paisajes"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="" data-image="https://images.pexels.com/photos/1563286/pexels-photo-1563286.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" data-target="#image-gallery"> <img class="img-thumbnail" src="https://images.pexels.com/photos/1563286/pexels-photo-1563286.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Paisaje"> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb filter disenos"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="" data-image="https://images.pexels.com/photos/1832064/pexels-photo-1832064.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" data-target="#image-gallery"> <img class="img-thumbnail" src="https://images.pexels.com/photos/1832064/pexels-photo-1832064.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Paisaje"> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb filter disenos"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="" data-image="https://images.pexels.com/photos/909620/pexels-photo-909620.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" data-target="#image-gallery"> <img class="img-thumbnail" src="https://images.pexels.com/photos/909620/pexels-photo-909620.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Paisaje"> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb filter disenos"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="" data-image="https://images.pexels.com/photos/940880/pexels-photo-940880.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" data-target="#image-gallery"> <img class="img-thumbnail" src="https://images.pexels.com/photos/940880/pexels-photo-940880.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Paisaje"> </a> </div> </div> <div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="image-gallery-title"></h4> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span> </button> </div> <div class="modal-body"> <img id="image-gallery-image" class="img-responsive col-md-12" src=""> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary float-left" id="show-previous-image"><i class="fa fa-arrow-left"></i> </button> <button type="button" id="show-next-image" class="btn btn-secondary float-right"><i class="fa fa-arrow-right"></i> </button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

.btn:focus, .btn:active, button:focus, button:active { outline: none !important; box-shadow: none !important; } #image-gallery .modal-footer{ display: block; } .thumb{ margin-top: 15px; margin-bottom: 15px; }

let modalId = $('#image-gallery'); $(document) .ready(function () { loadGallery(true, 'a.thumbnail'); //This function disables buttons when needed function disableButtons(counter_max, counter_current) { $('#show-previous-image, #show-next-image') .show(); if (counter_max === counter_current) { $('#show-next-image') .hide(); } else if (counter_current === 1) { $('#show-previous-image') .hide(); } } /** * * @param setIDs Sets IDs when DOM is loaded. If using a PHP counter, set to false. * @param setClickAttr Sets the attribute for the click handler. */ function loadGallery(setIDs, setClickAttr) { let current_image, selector, counter = 0; $('#show-next-image, #show-previous-image') .click(function () { if ($(this) .attr('id') === 'show-previous-image') { current_image--; } else { current_image++; } selector = $('[data-image-id="' + current_image + '"]'); updateGallery(selector); }); function updateGallery(selector) { let $sel = selector; current_image = $sel.data('image-id'); $('#image-gallery-title') .text($sel.data('title')); $('#image-gallery-image') .attr('src', $sel.data('image')); disableButtons(counter, $sel.data('image-id')); } if (setIDs == true) { $('[data-image-id]') .each(function () { counter++; $(this) .attr('data-image-id', counter); }); } $(setClickAttr) .on('click', function () { updateGallery($(this)); }); } }); // build key actions $(document) .keydown(function (e) { switch (e.which) { case 37: // left if ((modalId.data('bs.modal') || {})._isShown && $('#show-previous-image').is(":visible")) { $('#show-previous-image') .click(); } break; case 39: // right if ((modalId.data('bs.modal') || {})._isShown && $('#show-next-image').is(":visible")) { $('#show-next-image') .click(); } break; default: return; // exit this handler for other keys } e.preventDefault(); // prevent the default action (scroll / move caret) }); //Filter Button $(document).ready(function(){ $(".filter-button").click(function(){ var value = $(this).attr('data-filter'); if(value == "todo") { //$('.filter').removeClass('hidden'); $('.filter').show('1000'); } else { // $('.filter[filter-item="'+value+'"]').removeClass('hidden'); // $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden'); $(".filter").not('.'+value).hide('3000'); $('.filter').filter('.'+value).show('3000'); } }); });