С чем вам помочь?

Задавайте вопрос или опишите проблему, с которой Вы столкнулись

Вывод изображения большего размера при нажатии на изображение

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

В движке AdVantShop.NET начиная с версии 3 есть ряд способов как без модификаций и доработки сайта сделать то что нужно, именно при нажатии на фотографию открывать картинку большего размера в отдельном окне.

Обычно, на любом другом сайте, такое можно было сделать с помощью стороннего скрипта, например "fancybox", и его нужно отдельно подключать, чтобы с ним работать. Так вот, для удобства скрипт "fancybox" ( http://fancybox.net/ ) уже интегрирован в движок и мы будем просто с ним работать, подключать отдельно его не нужно.

Перед началом. 

1) Мы будем работать с текстом, например описания товара, в панели администрирования магазина в HTML редакторе, который переведён в режим "Источник".
Подробнее посмотрите тут - http://www.advantshop.net/help/pages/html-editor

2) Как вставлять картинку в текст - http://www.advantshop.net/help/pages/kak-zagruzit-kartinku-v-tekst

И так, чтобы сделать такую умную картинку, необходимо:

Шаг 1. 

К примеру картинка в HTML выглядит так:

<img alt="" src="/img/small1.jpg" />

 

Шаг 2.

Нужно её обтянуть, чтобы было так:

<a href="/img/big1.jpg">
<img alt="" src="/img/small1.jpg" />
</a>

Где: big1.jpg - это большая фотография, small1.jpg - маленькая фотография

Получится ПРОСТО ссылка на фотографию.

 

Шаг 3.

Вся магия в дополнительном параметре у ссылки: data-plugin="fancybox" 

Добавляем её нашему тегу <a> и в итоге получится так:

<a href="/img/big1.jpg" data-plugin="fancybox" >
<img alt="" src="/img/small1.jpg" />
</a>

 

Теперь при нажатии на картинку small1.jpg откроется картинка big1.jpg в окне. 

 

При нажатии получиться вот так:

 

Пробуйте.

 

Что бы показывать несколько фотографий, использовать стрелочки (влево, вправо), нужно объеденить их в группы добавив атрибут rel="group1"

Чтобы получилось так:

<a href="/img/big1.jpg" data-plugin="fancybox" rel="group1">
<img alt="" src="/img/small1.jpg" />
</a>
<a href="/img/big2.jpg" data-plugin="fancybox" rel="group1">
<img alt="" src="/img/small2.jpg" />
</a>

 

Чтобы добавить описание фотографии, нужно добавить атрибут title="Описание фотографии 1"

Получится так:

<a href="/img/big1.jpg" data-plugin="fancybox" rel="group1" title="Описание к фотографии 1">
<img alt="" src="/img/small1.jpg" />
</a>
<a href="/img/big2.jpg" data-plugin="fancybox" rel="group1" title="Описание к фотографии 2">
<img alt="" src="/img/small2.jpg" />
</a>

 

 

Открыть онлайн чат? Открыть
Статья оказалась полезной? Да Нет
Как мы можем улучшить статью?
Благодарим за отзыв.
Благодарим за отзыв. Мы улучшим эту статью.
Произошла ошибка.
Не нашли нужную статью? Предложить тему
Не нашли нужную статью?
Благодарим за отзыв.
Произошла ошибка.

Дизайн интернет-магазина

Работа с CSS Как изменить надписи кнопок на сайте Как изменить дизайн сайта Как изменить размер и стиль шрифта на сайте Примеры изменения CSS Как создать и загрузить свою цветовую схему в трансформер дизайна Настройка внешнего вида интернет-магазина Как загрузить свою тему в трансформер дизайна Редактирование блоков и текстов на главной странице Как создать и загрузить свой фон в трансформер дизайна Работа со статическими блоками (видео) Работа со статическими блоками (описание блоков) Вопросы авторского права на дизайн Товары на главной: добавление новинок и хитов Настройка карусели на главной странице интернет-магазина (видео) Настройка карусели на главной странице интернет-магазина Вывод изображения большего размера при нажатии изображение Вывод вплывающего окна с текстом при нажатии на ссылку Как добавить таблицу в текст страницы, описания или новости Установка якоря на странице Формирование рамки таблицы Как изменить размер фотографии (картинок) для всех сущностей в каталоге Как создать и загрузить свою тему в трансформер дизайна (Для версии 4.x и 3.x)
© AdvantShop. Платформа для открытия интернет-магазина.