主页 / 问题 / 879469
Accepted
Алексей Соколов
Asked:2020-09-10 15:19:54 +0000 UTC2020-09-10 15:19:54 +0000 UTC

单击另一张照片时替换一张照片

  • 772

有一个带有主照片的画廊，下面有一个滑块（有一张较小的照片）请告诉我当您从滑块单击照片时如何更改主照片

我通过以下方式在商店中显示图像：

<?= Html::img($mainImg->getUrl(), ['alt' => $product->name]) ?>

在此处输入图像描述

<div class="col-sm-5">
  <div class="view-product">
    <?= Html::img($mainImg->getUrl(), ['alt' => $product->name]) ?>
      <!-- <h3>Увеличить</h3> -->
  </div>
  <div id="similar-product" class="carousel slide" data-ride="carousel">
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <?php $count = count($gallery); $i = 0; foreach ($gallery as $img): ?>
      <?php if($i  % 3 == 0): ?>
      <div class="item <?php if($i == 0) echo ' active' ?>">
        <?php endif; ?>
        <?= Html::img($img->getUrl('84x84'), ['alt' => '']) ?>
          <?php $i++; if($i % 3 == 0 || $i == $count):?>
      </div>
      <?php endif; ?>
      <?php endforeach; ?>
    </div>
    <!-- Controls -->
    <a class="left item-control" href="#similar-product" data-slide="prev">
      <i class="fa fa-angle-left"></i>
    </a>
    <a class="right item-control" href="#similar-product" data-slide="next">
      <i class="fa fa-angle-right"></i>
    </a>
  </div>
</div>
php

1 个回答

  1. Best Answer
    $(document).ready(function() {
    let $lightbox = $('.view-product img');

    $('.carousel-inner img').click(function(e) {
        e.preventDefault();
        let src  =  $(this).attr('src');
        $lightbox.attr('src', src);
        $lightbox.fadeIn('fast');
    })
});
    • 2

相关问题