2

введите сюда описание изображения

введите сюда описание изображения

Как вывести изображение карточки товара в модальное окно? Название из карточки удалось вывести в Input модального окна, таким образом:

$('#applicationsection .element .button, #superoffer .button, #specialoffers .button, #actions .button').click(function() {
  var theme = $(this).data('theme');
  $('#themeInput').val(theme);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="col-sm-6 col-md-4 col-lg-3 mix category3">
  <div class="element">
    <div class="element-inner">
      <div class="img-wrapper text-center relative">
        <a href="images/gallery/tulpan1.jpg" class="lightgallery-link absolute" data-sub-html="Букет тюльпанов #1011"></a>
        <img src="images/gallery/tulpan1-thumb.png" alt="product1" />
      </div>
      <div class="element-content">
        <div class="title">
          <div class="table">
            <div class="table-cell">
              Букет тюльпанов #1011
            </div>
          </div>
        </div>
        <div class="push10"></div>
        <span class="old-price strike">1 300 руб.</span> <span class="price bold f26 green">800 руб.</span>
        <div class="push10"></div>
        <a href="#application" class="button min fancyboxModal" data-theme="Букет тюльпанов #1011">Заказать</a>
      </div>
    </div>
  </div>
</div>

<!--Модальное окно:-->

<div class="modal" id="application">
  <div class="title-h2 green">Оформление заявки</div>
  <div class="push10"></div>
  <div class="rf">
    <form name="form-application">
      <div class="form-group">
        <input type="text" name="service_name" id="themeInput" class="form-control" readonly="readonly" />
      </div>

      <div class="form-group">
        <input type="text" name="fio" class="form-control" placeholder="Имя" />
      </div>

      <div class="form-group">
        <input type="text" name="tel" class="form-control tel required" placeholder="Телефон *" />
      </div>
      <p><span class="red">*</span> <span class="f12">- поля, обязательные для заполнения</span></p>
      <div>
        <input type="submit" class="button btn feedback min" value="Отправить" />
      </div>
    </form>
  </div>
</div>

1 ответ 1

2

Можно сделать так — пройтись по DOM вверх к корневому блоку .element, найти в нем блок .image-wrapper, в нем img и взять значение его атрибута src, а затем полученное значение вставить в заранее заготовленный тег внутри модального окна.

$('#applicationsection .element .button, #superoffer .button, #specialoffers .button, #actions .button').click(function() {
  var theme = $(this).data('theme'),
      imageSource = $(this).closest('.image-wrapper').find('img').attr('src');

  $('#themeInput').val(theme);

  $('#product-image').attr('src', imageSource);
});
<form name="form-application">
  <div class="form-group">
    <input type="text" name="service_name" id="themeInput" class="form-control" readonly="readonly" />
  </div>

  <div class="form-group">
    <input type="text" name="fio" class="form-control" placeholder="Имя" />
  </div>

  <div class="form-group">
    <img id="product-image" src="" alt="" class="form-image" />
  </div>

  <div class="form-group">
    <input type="text" name="tel" class="form-control tel required" placeholder="Телефон *" />
  </div>
  <p><span class="red">*</span> <span class="f12">- поля, обязательные для заполнения</span></p>
  <div>
    <input type="submit" class="button btn feedback min" value="Отправить" />
  </div>
</form>
0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.