145 lines
5.5 KiB
HTML
145 lines
5.5 KiB
HTML
<!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>
|