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

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

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

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

 

 

[alinalessioYandex]

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>

 

 

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

[alinalessioYandex]

[РЕШЕНО]

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');

 

[Ayura]

Да, отличное решение. Решил на версии 2.3.

[leninvis]

On 9/19/2018 at 10:22 AM, alinalessioYandex said:

[РЕШЕНО]

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');

 

Добрый день. По второму пункту можно подробнее пожалуйста? как дать родительскому блоку содержимого класс? где и куда его прописать?