Archivo ohana.html añadido
This commit is contained in:
parent
7e75c092ee
commit
210d1eb9bc
node_modules/admin-lte
|
@ -0,0 +1,119 @@
|
|||
<!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">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>
|
||||
</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>
|
||||
</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/comida.jpeg" data-toggle="lightbox" data-gallery="gallery">
|
||||
<img src="./dist/img/ohana/comida.jpeg" 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sección de Lightbox -->
|
||||
<div class="card card-primary">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Ekko Lightbox</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">
|
||||
</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">
|
||||
</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>
|
||||
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue