Cambios añadidos

This commit is contained in:
Ohana Monserrath Gutierrez Hernandez 2025-03-27 11:14:00 -06:00
parent c25e2d41c7
commit d6a385cc99
12 changed files with 91 additions and 26 deletions

View File

@ -138,6 +138,7 @@
z-index: 800;
}
/* Estilos para el contenedor fluido */
.container-fluid {
width: 100%;
@ -145,8 +146,11 @@
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
/* Estilos generales del body */
.hold-transition {
transition: all 0.2s ease-in-out;
@ -224,6 +228,8 @@
}
.img-fluid {
max-width: 150px; /* Ajusta el tamaño máximo de las imágenes */
height: auto; /* Mantiene la proporción de la imagen */

BIN
node_modules/admin-lte/dist/img/comida.jpeg generated vendored Normal file

Binary file not shown.

After

(image error) Size: 22 KiB

BIN
node_modules/admin-lte/dist/img/ohana/filet.jpg generated vendored Normal file

Binary file not shown.

After

(image error) Size: 33 KiB

BIN
node_modules/admin-lte/dist/img/ohana/fish.jpg generated vendored Normal file

Binary file not shown.

After

(image error) Size: 16 KiB

BIN
node_modules/admin-lte/dist/img/ohana/fruta.jpg generated vendored Normal file

Binary file not shown.

After

(image error) Size: 23 KiB

BIN
node_modules/admin-lte/dist/img/ohana/hotcakes.jpg generated vendored Normal file

Binary file not shown.

After

(image error) Size: 27 KiB

BIN
node_modules/admin-lte/dist/img/ohana/pan.jpg generated vendored Normal file

Binary file not shown.

After

(image error) Size: 38 KiB

BIN
node_modules/admin-lte/dist/img/ohana/rice.jpg generated vendored Normal file

Binary file not shown.

After

(image error) Size: 43 KiB

BIN
node_modules/admin-lte/dist/img/ohana/sandwich.jpg generated vendored Normal file

Binary file not shown.

After

(image error) Size: 14 KiB

BIN
node_modules/admin-lte/dist/img/ohana/sushi.jpg generated vendored Normal file

Binary file not shown.

After

(image error) Size: 16 KiB

34
node_modules/admin-lte/dist/js/gallery.js generated vendored Normal file
View File

@ -0,0 +1,34 @@
$(document).ready(function () {
// Inicializar Ekko Lightbox
$(document).on('click', '[data-toggle="lightbox"]', function (event) {
event.preventDefault();
$(this).ekkoLightbox();
});
// Inicializar Filterizr
var filterizd = $('.filter-container').filterizr({
layout: 'sameSize'
});
// Manejo de clic en los botones de filtro
$('.filter').on('click', function () {
// Remover clase 'active' de todos los botones y agregarla al botón clickeado
$('.filter').removeClass('active');
$(this).addClass('active');
// Obtener el filtro correspondiente al botón clickeado
var filter = $(this).data('filter');
filterizd.filterizr('filter', filter);
// Si el filtro es "Category 1", cambiar a la siguiente pestaña (Category 2)
if (filter === "1") {
setTimeout(function () {
// Buscar el siguiente botón de categoría
var nextButton = $('.filter[data-filter="2"]');
if (nextButton.length > 0) {
nextButton.click();
}
}, 1000); // Cambiar rápidamente, puedes ajustar el tiempo si lo deseas
}
});
});

77
node_modules/admin-lte/ohana.html generated vendored
View File

@ -18,19 +18,19 @@
<div class="content-wrapper">
<section class="content">
<div class="container-fluid">
<h2 class="mt-4">Gallery</h2>
<h2 class="mt-4">Food Gallery</h2>
<!-- Filtro de categorías -->
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">FilteriZr Gallery with Ekko Lightbox</h3>
<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 (WHITE)</button>
<button class="btn btn-success filter" data-filter="2">Category 2 (BLACK)</button>
<button class="btn btn-warning filter" data-filter="3">Category 3 (COLORED)</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">
@ -40,13 +40,30 @@
</a>
</div>
<div class="filtr-item col-md-3" data-category="2">
<a href="./dist/img/ohana/comida.jpeg" data-toggle="lightbox" data-gallery="gallery">
<img src="./dist/img/ohana/comida.jpeg" class="img-fluid" alt="Black Sample">
<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/comida.jpeg" data-toggle="lightbox" data-gallery="gallery">
<img src="./dist/img/ohana/comida.jpeg" class="img-fluid" alt="Colored Sample">
<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>
@ -56,18 +73,24 @@
<!-- Sección de Lightbox -->
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Ekko Lightbox</h3>
<h3 class="card-title">Comida</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-3">
<a href="./dist/img/ohana/comida.jpeg" data-toggle="lightbox" data-gallery="gallery">
<img src="./dist/img/ohana/comida.jpeg" class="img-fluid" alt="Sample 1">
<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">
<a href="./dist/img/ohana/comida.jpeg" data-toggle="lightbox" data-gallery="gallery">
<img src="./dist/img/ohana/comida.jpeg" class="img-fluid" alt="Sample 2">
<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>
@ -77,17 +100,8 @@
</div>
</section>
</div>
</div>
<!-- Scripts -->
<script src="../plugins/jquery/jquery.min.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
@ -115,5 +129,16 @@
});
</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>
</html>