Fancybox is repeating images

General Web Dev
1

Fancybox is repeating images so please how to fix that and thank you very much

Sans titr
Sans titr1366×796 124 KB

code

 <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>