Проблемы с Laravel (PHP) и совой каруселью - PullRequest
Новая
       13

Проблемы с Laravel (PHP) и совой каруселью

0 голосов
/ 27 мая 2018

enter image description here

Я пытаюсь создать галерею изображений продуктов для своего проекта Laravel, используя Owl Carousel.Основное изображение, хранящееся в базе данных в столбце «изображение», прекрасно отображается как в основном изображении, так и в галерее миниатюр.В настоящее время галерея миниатюр неправильно неоднократно заполняется изображением из столбца «изображение», когда оно должно быть заполнено как из столбца «изображение», так и из изображений, расположенных в столбце «изображения».

Я написал HTML / CSS / PHP / и т. Д.пытаясь выполнить вышеупомянутое, но мне не повезло (опять же, я просто продолжаю получать повторение изображения из столбца «изображение» в галерее миниатюр).Вот соответствующий код: 

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

Сценарий "Я" написал: 

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

Есть какие-либо предложения относительно того, что я могу делать неправильно?Я пробовал устранять неисправности, разные варианты и уходить / возвращаться, но безуспешно.

1 Ответ

0 голосов
/ 28 мая 2018

Во втором вызове функции productImage вы передаете $product->image, который ссылается на ваше основное изображение.Вы хотите передать только $image как:

productImage($image)

...