Картинка во всплывающем окне

Разработчикам Общение разработчиков
1

Приветствую) Подскажите, пожалуйста, как можно реализовать - необходимо добавить ссылку, по клику на которую откроется изображение во всплывающем окне. Причем, чтобы всплывающее окно было по размеру картинки.
Пробовала создавать инфо страницу, вставлять в нее картинку и
смотреть сертификат
Но окно получается широким.
Подскажите, пожалуйста.

2

Тоже интересует эта тема.

1 лайк
3

Подскажите, гуру, что вообще нет такой возможности?

4

Не совсем понял, как вы пытались сделать. Если использовали стандартное диалоговое окно, то попробуйте добавить микроформат cm-dialog-auto-size

Больше деталей тут

https://www.cs-cart.ru/docs/latest/developer_guide/core/front-end/microformats.html

5

Да, как раз использовала class=“cm-dialog-opener cm-dialog-auto-size”
Но просто картинку же нельзя так открыть?
А информационную страницу растягивает как и другие информационные стрвницы.

1 лайк
6

Используйте код со стороны, например этот (кстати тоже понравились примеры, положил в закладки)
http://shpargalkablog.ru/2011/02/modalnoe-okno-css.html
вообще таких примеров реализации даже на css масса

1 лайк
7

Попробуйте так

<a id="opener_my_image" class="cm-dialog-opener cm-dialog-auto-size" data-ca-target-id="content_my_image" rel="nofollow">{__('my_image_text')}</a>

<div class="hidden" id="content_my_image" title="{__('my_image')}">
    ... ваша картинка тут...
</div>
2 лайка
8

Спасибо, все получилось!

1 лайк
9

Рад был помочь!

10

А можно, подобный код только открытие не по ссылке а по клику на картинку? :slight_smile: т е в тексте страницы размещаем небольшую картинку, кода по ней кликаем загружается во всплывающем окне большая.

11

Примерно так:

<a id="opener_my_image" class="cm-dialog-opener cm-dialog-auto-size" data-ca-target-id="content_my_image" rel="nofollow">
<img  src="https://demo.cs-cart.ru/stores/8a74691e1c78916a/images/thumbnails/250/250/detailed/0/X32444_01.jpg">
</a>

<div class="hidden" id="content_my_image" title="{__('my_image')}">
   <img  src="https://demo.cs-cart.ru/stores/8a74691e1c78916a/images/detailed/0/X32444_01.jpg">
</div>
3 лайка
12

разобрался почему не получалось раньше :slight_smile: редактор режит код … а в другом невозможно отредактировать визуально … а третий просто не грузит картинки :slight_smile: т к делал в том, что режит код не мог понять почему картинка все время не кликабельна

3 лайка