'I have more than one image for images in thumbnail with fancybox

Fancybox is repeating images see the right of image and I want to get one image for all images and not three so please how to fix that and thank you very much enter image description here script.js:

if($("[data-fancybox]").length>0) {  
        $("[data-fancybox]").fancybox();
    }

<article class="gallery-wrap">
                                
            
        @if ($product->images->count() > 0)
                                    
            <div class="img-big-wrap">
                                        
                  <div class="padding-y">
                                            
                        <a href="{{ asset('storage/'.$product->images->first()->full) }}" data-fancybox="gallery"  data-caption="{{$product->name}}" > 
                                                
                        <img class="mainImage" src="{{ asset('storage/'.$product->images->first()->full) }}" alt="" id="mainImage" >
                          </a>
                                               
                     </div>
                  </div>
                  @else
               <div class="img-big-wrap">
                <div>
                <a href="https://via.placeholder.com/176" data-fancybox=""><img src="https://via.placeholder.com/176"></a>
                  </div>
                </div>
             @endif
              @if ($product->images->count() > 0)
                                     
               <div class="img-small-wrap">
                                        
                 @foreach($product->images as $image)
                                            
                    <div class="item-gallery" >
                                                
                     <a href="{{ asset('storage/'.$image->full) }}"  data-fancybox="gallery"  data-caption="{{$product->name}}">
                   <img class="changeImage" src="{{ asset('storage/'.$image->full) }}" alt="">
                  </div>
                 @endforeach
                 </div>
              @endif
     </article>
laravelfancybox


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions