mirror of https://github.com/4xmen/xshop.git
parent
879ea9d1a3
commit
46c98f8178
@ -0,0 +1,13 @@
|
||||
@extends('website.inc.website-layout')
|
||||
|
||||
@section('title')
|
||||
{{$gallery->title}} - {{config('app.name')}}
|
||||
@endsection
|
||||
@section('content')
|
||||
<main>
|
||||
@foreach(getParts($area) as $part)
|
||||
@php($p = $part->getBladeWithData($gallery))
|
||||
@include($p['blade'],['data' => $p['data']])
|
||||
@endforeach
|
||||
</main>
|
||||
@endsection
|
||||
@ -0,0 +1,17 @@
|
||||
<section id='AparatGallery'>
|
||||
{{-- <div class="{{gfx()['container']}}">--}}
|
||||
<img src="{{$gallery->images[0]->imgOriginalUrl()}}" id="aparat-main-image" alt="">
|
||||
<div class="aparat-list">
|
||||
@if($gallery->images->count() > 0)
|
||||
@foreach($gallery->images as $image)
|
||||
<div class="aparat-item">
|
||||
<a class="gallery-image aparat-link"
|
||||
href="{{$image->imgOriginalUrl()}}">
|
||||
<img src="{{$image->imgurl()}}" class="img-fluid" alt="">
|
||||
</a>
|
||||
</div>
|
||||
@endforeach
|
||||
@endif
|
||||
</div>
|
||||
{{-- </div>--}}
|
||||
</section>
|
||||
@ -0,0 +1,68 @@
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
const aparatList = document.querySelector('.aparat-list');
|
||||
let isScrolling = false;
|
||||
let startX;
|
||||
let scrollLeft;
|
||||
const scrollSpeed = 150; // Adjust this value to change scroll speed
|
||||
let moveInterval;
|
||||
let me;
|
||||
|
||||
document.querySelectorAll('.aparat-link')?.forEach(function (el) {
|
||||
el.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
document.querySelector('#aparat-main-image').setAttribute('src', this.getAttribute('href'));
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
aparatList.addEventListener('mousemove', (e) => {
|
||||
me = e;
|
||||
});
|
||||
|
||||
aparatList.addEventListener('mousedown', (e) => {
|
||||
isScrolling = true;
|
||||
startX = e.pageX - aparatList.offsetLeft;
|
||||
scrollLeft = aparatList.scrollLeft;
|
||||
});
|
||||
|
||||
aparatList.addEventListener('mouseleave', () => {
|
||||
isScrolling = false;
|
||||
try {
|
||||
clearInterval(moveInterval);
|
||||
} catch (e) {
|
||||
}
|
||||
|
||||
});
|
||||
aparatList.addEventListener('mouseenter', () => {
|
||||
moveInterval = setInterval( () => {
|
||||
if (!isScrolling) {
|
||||
const rect = aparatList.getBoundingClientRect();
|
||||
const isLeftSide = me.clientX - rect.left < rect.width / 5;
|
||||
const isRightSide = me.clientX > rect.right - rect.width / 5;
|
||||
console.log(isRightSide);
|
||||
|
||||
if (isLeftSide && aparatList.scrollLeft > 0) {
|
||||
aparatList.scrollLeft -= scrollSpeed;
|
||||
} else if (isRightSide && aparatList.scrollLeft < aparatList.scrollWidth - aparatList.clientWidth ) {
|
||||
aparatList.scrollLeft += scrollSpeed;
|
||||
}
|
||||
}
|
||||
},1100);
|
||||
});
|
||||
|
||||
aparatList.addEventListener('mouseup', () => {
|
||||
isScrolling = false;
|
||||
});
|
||||
|
||||
aparatList.addEventListener('mousemove', (e) => {
|
||||
if (!isScrolling) return;
|
||||
e.preventDefault();
|
||||
const x = e.pageX - aparatList.offsetLeft;
|
||||
const walk = (x - startX) * 2;
|
||||
aparatList.scrollLeft = scrollLeft - walk;
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "AparatGallery",
|
||||
"version": "1.0",
|
||||
"author": "xStack",
|
||||
"email": "xshop@xstack.ir",
|
||||
"license": "GPL-3.0-or-later",
|
||||
"url": "https:\/\/xstack.ir",
|
||||
"author_url": "https:\/\/4xmen.ir",
|
||||
"packages": []
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
<?php
|
||||
|
||||
namespace Resources\Views\Segments;
|
||||
|
||||
use App\Models\Part;
|
||||
|
||||
class AparatGallery
|
||||
{
|
||||
public static function onAdd(Part $part = null)
|
||||
{
|
||||
|
||||
}
|
||||
public static function onRemove(Part $part = null)
|
||||
{
|
||||
|
||||
}
|
||||
public static function onMount(Part $part = null)
|
||||
{
|
||||
return $part;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
#AparatGallery {
|
||||
// scss
|
||||
#aparat-main-image {
|
||||
height: 80vh;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.aparat-list {
|
||||
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
||||
|
||||
.aparat-item {
|
||||
min-width: 350px;
|
||||
display: inline-block;
|
||||
|
||||
.aparat-link {
|
||||
img {
|
||||
height: 20vh;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none; /* WebKit */
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 650 KiB |
@ -0,0 +1,15 @@
|
||||
<section class='GallaryGrid'>
|
||||
<div class="{{gfx()['container']}}">
|
||||
<div class="row py-4">
|
||||
@if($gallery->images->count() > 0)
|
||||
@foreach($gallery->images as $image)
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<a class="gallery-image light-box" data-toggle="lightbox" data-gallery="{{$gallery->slug}}" href="{{$image->imgOriginalUrl()}}">
|
||||
<img src="{{$image->imgurl()}}" class="img-fluid" alt="">
|
||||
</a>
|
||||
</div>
|
||||
@endforeach
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -0,0 +1,10 @@
|
||||
import Lightbox from 'bs5-lightbox' ;
|
||||
|
||||
document.addEventListener('DOMContentLoaded',function () {
|
||||
|
||||
|
||||
for (const el of document.querySelectorAll('.light-box')) {
|
||||
el.addEventListener('click', Lightbox.initialize);
|
||||
}
|
||||
|
||||
});
|
||||
@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "GallaryGrid",
|
||||
"version": "1.0",
|
||||
"author": "xStack",
|
||||
"email": "xshop@xstack.ir",
|
||||
"license": "GPL-3.0-or-later",
|
||||
"url": "https:\/\/xstack.ir",
|
||||
"author_url": "https:\/\/4xmen.ir",
|
||||
"packages": []
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
<?php
|
||||
|
||||
namespace Resources\Views\Segments;
|
||||
|
||||
use App\Models\Part;
|
||||
|
||||
class GallaryGrid
|
||||
{
|
||||
public static function onAdd(Part $part = null)
|
||||
{
|
||||
|
||||
}
|
||||
public static function onRemove(Part $part = null)
|
||||
{
|
||||
|
||||
}
|
||||
public static function onMount(Part $part = null)
|
||||
{
|
||||
return $part;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
|
||||
.GallaryGrid {
|
||||
// scss
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 371 KiB |
Loading…
Reference in New Issue