замена одного фото при клике на другие

233

17 декабря 2018, 08:40

Есть галерея с главным фото и слайдером под ним(там фото меньше) подскажите пожалуйста как сделать чтобы при клике на фото из слайдера менялось главное фото

Вывожу картинки в магазине след образом:

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

Answer 1

$(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');
    })
});

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Перезапись url в wordpress

Допустим создан произвольный тип записи с таким названием: custom_postЕсть страница, на которой выводится список этих записей нового типа, по примеру...

217

PHP

Поиск по необязательным полям

У меня есть поля в бд: one,two,three,four,five,six Обязательные для заполнения: two,three,four Вопрос, как мне проверять, заполнено ли поле one, five и six? и искать...

310

PHP