من سه جدول دارم به نامه های زیر میباشد.
من میخواهم گالری تصاویر isotope استفاده کنم یعنی دسته ها را بیاره و روی دسته کلیک کرد تصاویر مربوط به ان دسته نمایش بدهد. مثل همچین چیزی http://tajineh.co.ir/gallery .
GalleryController.php
public function gallery()
{
$galleries = Gallery::all();
$categories = Category::where('parent_id', 42)->get();
return view('Home.galleries', compact('galleries', 'categories'));
}
galleries.blade.php
<div class="container">
<h2 class="mt-3 mb-3">{{ __('message.menu.galleries') }}</h2>
<div class="row">
<div class="container-fluid" style="margin-top:20px;">
<div class="row">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
@foreach($categories as $category)
<li class="nav-item">
<a class="nav-link" id="isotope-{{ $category->id }}-tab" data-toggle="pill" href="#isotope-{{ $category->id }}" role="tab" aria-controls="isotope-{{ $category->id }}" aria-selected="false">{{ $category->name }}</a>
</li>
@endforeach
</ul>
</div><hr noshade style="margin-top:-20px;">
<div class="container grid">
<div class="tab-content" id="pills-tabContent">
@foreach($categories as $key=>$category)
<?php $ok = false;?>
@foreach($category->galleries as $key=>$gallery)
<?php $ok = true;?>
@if(count($category->galleries) == 1 || $key == 0)
<div class="tab-pane fade" id="isotope-{{ $gallery->pivot->category_id }}" role="tabpanel" aria-labelledby="isotope-{{ $gallery->pivot->category_id }}-tab">
@endif
<div class="Portfolio">
<a href="#!">
<img class="card-img" src="{{ $gallery->image }}" alt="">
</a>
<div class="desc">{{ $gallery->title }}</div>
</div>
@if(count($category->galleries) == 1 || count($category->galleries) == ++$key)
</div>
@endif
@endforeach
@if(!$ok)
<div class="tab-pane fade" id="isotope-{{ $category->id }}" role="tabpanel" aria-labelledby="isotope-{{ $category->id }}-tab"></div>
@endif
@endforeach
</div>
</div>
</div>
</div>
</div>
script.js
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script>
$('.nav-item .nav-link').trigger('click');
$('.nav-item .nav-link').on('click', function (e) {
e.preventDefault();
var id = $(this).attr('id');
$('#pills-tabContent').isotope({ filter: '#'+id });
})
</script>
خیلی تلاش کردم اما نشد که بشه که چطوری مبشه روی دسته بندی کلیک کنیم و تصاویر مربوطه به آن دسته نمیش بدهد.
شاید من اشتباه میکنم دوستان اگر میدانن کمکی کنن.
این مورد تماما با جاوااسکریپت پیاده میشه، شما اول تمام تصاویر رو از لود میکنید احتمالا هر کدوم از تصاویر مربوط به یه گروهی هستند که باید در المنتها مشخص بشن و با جاوااسکریپت فیلتر بشن همین
با isotope هم کار نکردیم که بخوام کمکتون کنم در اون رابطه
سلام
بنده هم با isotope کار نکردم ولی خب برای مشکلت یه راه حلی که به ذهنم میخوره که بیای هر دسته رو که ایجاد میکنی برای همون دسته bootstrap modal هم ایجاد کنی که باقی تصاویر در اون بصورت اسلاید نمایشه داده میشه و با کلیک بر روی تصویر هر دسته مودال اون نمایش داده بشه
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟