Ad

Laravel (PHP) And Owl Carousel Issues

enter image description here

I am trying to create a product image gallery for my Laravel project using Owl Carousel. The main image, stored in the database under the "image" column, appears just fine in both the primary image and the thumbnail gallery. The thumbnail gallery, at the moment, is incorrectly repeatedly populated with the image from the "image" column, when it should be populated from both the "image" column and the images located in the "images" column.

I have written HTML/CSS/PHP/etc. attempting to accomplish the aforementioned, but I'm not having any luck (again, I just keep getting a repeat of the image from the "image" column in the thumbnail gallery). Here is the applicable code:

<div class="product-images col-lg-6">
        <div data-slider-id="1" class="owl-carousel items-slider owl-drag">
          <div class="item">
            <img src="{{ productImage($product->image) }}" alt="product" id="currentImage">
          </div>
        </div>

        <div data-slider-id="1" class="owl-thumbs d-flex align-items-center justify-content-center">
          <button class="owl-thumb-item">
            <img src="{{ productImage($product->image) }}" alt="product">
          </button>

          @if ($product->images)
            @foreach (json_decode($product->images, true) as $image)
              <button class="owl-thumb-item">
                <img src="{{ productImage($product->image) }}" alt="product">
              </button>
            @endforeach
          @endif
        </div>
      </div>

The script "I" wrote:

<script>
  (function(){
    const currentImage = document.querySelector('#currentImage');
    const images = document.querySelectorAll('.owl-thumb-item');

    images.forEach((element) => element.addEventListener('click', thumbnailClick));

    function thumbnailClick(e) {
      currentImage.src = this.querySelector('img').src;
    }
  })();
</script>

Any suggestions as to what I might be doing wrong? I've tried troubleshooting, different variations, and walking away/coming back, but with no luck.

Ad

Answer

In your second productImage function call, you are passing $product->image which refers to your primary image. You want to be passing just $image like:

productImage($image)

Ad
source: stackoverflow.com
Ad