<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Galería | AdminLTE</title>
<!-- Estilos -->
<link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="../plugins/ekko-lightbox/ekko-lightbox.css">
<link rel="stylesheet" href="./dist/css/ohanastyle.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
<div class="content-wrapper">
<section class="content">
<div class="container-fluid">
<h2 class="mt-4">Food Gallery</h2>
<!-- Filtro de categorías -->
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Desayuno</h3>
</div>
<div class="card-body">
<div class="btn-group w-100 mb-2">
<button class="btn btn-primary filter" data-filter="all">All items</button>
<button class="btn btn-info filter" data-filter="1">Category 1 </button>
<button class="btn btn-success filter" data-filter="2">Category 2 </button>
<button class="btn btn-warning filter" data-filter="3">Category 3 </button>
</div>
<div class="filter-container p-0 row">
<div class="filtr-item col-md-3" data-category="1">
<a href="./dist/img/ohana/comida.jpeg" data-toggle="lightbox" data-gallery="gallery">
<img src="./dist/img/ohana/comida.jpeg" class="img-fluid" alt="White Sample">
</a>
</div>
<div class="filtr-item col-md-3" data-category="2">
<a href="./dist/img/ohana/fruta.jpg" data-toggle="lightbox" data-gallery="gallery">
<img src="./dist/img/ohana/fruta.jpg" class="img-fluid" alt="Black Sample">
</a>
</div>
<div class="filtr-item col-md-3" data-category="3">
<a href="./dist/img/ohana/hotcakes.jpg" data-toggle="lightbox" data-gallery="gallery">
<img src="./dist/img/ohana/hotcakes.jpg" class="img-fluid" alt="Colored Sample">
</a>
</div>
<div class="filtr-item col-md-3" data-category="2">
<a href="./dist/img/ohana/pan.jpg" data-toggle="lightbox" data-gallery="gallery">
<img src="./dist/img/ohana/pan.jpg" class="img-fluid" alt="Colored Sample">
</a>
</div>
<div class="filtr-item col-md-3" data-category="3">
<a href="./dist/img/ohana/sandwich.jpg" data-toggle="lightbox" data-gallery="gallery">
<img src="./dist/img/ohana/sandwich.jpg" class="img-fluid" alt="Colored Sample">
</a>
</div>
<div class="filtr-item col-md-3" data-category="3">
<a href="./dist/img/ohana/sushi.jpg" data-toggle="lightbox" data-gallery="gallery">
<img src="./dist/img/ohana/sushi.jpg" class="img-fluid" alt="Colored Sample">
</a>
</div>
</div>
</div>
</div>
<!-- Sección de Lightbox -->
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Comida</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-3" style="display: inline-block" >
<a href="./dist/img/ohana/rice.jpg " data-toggle="lightbox" data-gallery="gallery">
<img src="./dist/img/ohana/rice.jpg" class="img-fluid" alt="Sample 1">
</a>
</div>
<div class="col-md-3"style="display: inline-block">
<a href="./dist/img/ohana/filet.jpg" data-toggle="lightbox" data-gallery="gallery">
<img src="./dist/img/ohana/filet.jpg" class="img-fluid" alt="Sample 2">
</a>
</div>
<div class="col-md-3" style="display: inline-block">
<a href="./dist/img/ohana/fish.jpg" data-toggle="lightbox" data-gallery="gallery">
<img src="./dist/img/ohana/fish.jpg" class="img-fluid" alt="Sample 3">
</a>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- Scripts -->
<script src="../plugins/jquery/jquery.min.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../plugins/ekko-lightbox/ekko-lightbox.min.js"></script>
<script src="./dist/js/adminlte.min.js"></script>
<script src="../plugins/filterizr/jquery.filterizr.min.js"></script>
<script>
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
event.preventDefault();
$(this).ekkoLightbox();
});
$(function() {
var filterizd = $('.filter-container').filterizr({
layout: 'sameSize'
});
$('.filter').on('click', function() {
$('.filter').removeClass('active');
$(this).addClass('active');
var filter = $(this).data('filter');
filterizd.filterizr('filter', filter);
});
});
</script>
<!-- Script para las pestañas -->
<script>
$(document).ready(function() {
// Inicializa las pestañas
$('#myTabs a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
});
});
</script>
</body>
</html>