Cambios añadidos
This commit is contained in:
parent
c25e2d41c7
commit
d6a385cc99
node_modules/admin-lte
|
@ -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 */
|
||||
|
|
Binary file not shown.
After ![]() (image error) Size: 22 KiB |
Binary file not shown.
After ![]() (image error) Size: 33 KiB |
Binary file not shown.
After ![]() (image error) Size: 16 KiB |
Binary file not shown.
After ![]() (image error) Size: 23 KiB |
Binary file not shown.
After ![]() (image error) Size: 27 KiB |
Binary file not shown.
After ![]() (image error) Size: 38 KiB |
Binary file not shown.
After ![]() (image error) Size: 43 KiB |
Binary file not shown.
After ![]() (image error) Size: 14 KiB |
Binary file not shown.
After ![]() (image error) Size: 16 KiB |
|
@ -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
|
||||
}
|
||||
});
|
||||
});
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue