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