Перейти к содержанию
alinalessioYandex

[Решено] Как сделать всплывающими изображения на странице информации?

Рекомендуемые сообщения

Пытаюсь сделать изображения всплывающими на странице статей (index.php?route=information)

Вставляю в шаблон catalog/view/theme/pechi/template/information/information.tpl в самом конце до <?php echo $footer; ?>

<script type="text/javascript"><!--
$(document).ready(function() {
  $('.thumbnails').magnificPopup({
    type:'image',
    delegate: 'a',
    gallery: {
      enabled:true
    }
  });
});
//--></script>

И в шаблоне добавил thumbnails (класс блоку, внутри которого размещаю изображения)

<div id="content" class="col-sm-12 thumbnails" wfd-id="78">
  <h1>Сертификаты</h1>
  	<p><a href=".../img_20180904_095931_result.jpg"><img alt="" src=".../img_20180904_095931_result.jpg" style="height:359px; width:250px"></a></p>
</div>

Чего еще не хватает? Что еще добавить чтобы заработало всплывание изображений?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

А чем вас не устраивает стандартный бутстрап?

Спойлер

<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

 

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
42 минуты назад, anboza сказал:

А чем вас не устраивает стандартный бутстрап?

  Скрыть контент


<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

 

 

Я пытался сделать на основе того, как это сделано на странице карточки товара, когда жмем на изображение и оно увеличивается. Для того чтобы задействовать бутстрап, придется прописывать блоки с классами, а я делаю для человека, который будет добавлять изображения через виз. редактор. Пытаюсь сделать, чтобы можно было через виз.редактор можно было добавить изображение с ссылкой на это же изображение и чтобы оно подхватывалось всплывашкой, которая задействована на странице товаров.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

[РЕШЕНО]

1. В шаблоне catalog/view/theme/ВАШАТЕМА/template/information/information.tpl добавить 

<script type="text/javascript"><!--
$(document).ready(function() {
  $('.thumbnails').magnificPopup({
    type:'image',
    delegate: 'a',
    gallery: {
      enabled:true
    }
  });
});
//--></script>

2. В том же шаблоне дать родительскому блоку содержимого класс thumbnails

3. В контроллере catalog/controller/information/information.php после строки

$this->document->setKeywords($information_info['meta_keyword']);

вставить следующее:

$this->document->addScript('catalog/view/javascript/jquery/magnific/jquery.magnific-popup.min.js');
$this->document->addStyle('catalog/view/javascript/jquery/magnific/magnific-popup.css');

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.