Лента изображений. Примеры использованияДумаю многие успели оценить удобство использования появившихся с версии 5.12 средств работы с изображениями. Теперь, мы предлагаем изящное решение для вставки сразу нескольких изображений в текст. Итак, новый гаджет в визуальном редакторе: «Лента изображений». Что это такое и как это использовать. На сайте нужно показать несколько иллюстраций, с описаниями или без, красиво их расположить, не занимая много места? Значит лента изображений - то, что вам нужно. Мы покажем варианты применения гаджета на примерах. Примеры использования ленты, с указанием настроек в панели управления.Для использования гаджета - его необходимо выбрать в панели визуального редактора и наполнить иллюстрациями: Установить желаемый вид в закладке настроек, в поставку входит несколько готовых шаблонов. Можно выбрать и настроить подходящий: Результат - лента с детальным просмотром изображения:
*при этом можно прокручивать ленту колесом мыши
Легкими движениями можно изменить вариант оформления, в настройках:Результат - лента поменяла прокрутку на вертикальную, появилось два столбца. Детальное изображение теперь слева.Бывает необходимость показать ленту с детальным просмотром во всплывающем окне. Достаточно переключить настройки на новый шаблон в поставке.Результат - только лента. Все детали во всплывающем окне с листанием.*к любому изображению всегда можно задать как свой заголовок, так и описание и даже ссылку на страницу на своём или внешнем сайте. Наконец, можно легко использовать ленту в качестве популярного варианта оформления с перелистыванием.Результат - красивый популярный гаджет.* текстовые описания с оформлением можно добавить к любым иллюстрациям.
Необходимо сделать слайд-шоу? Этот вариант, также предусмотрен.Лента покажет все изображения автоматически
Мало шаблонов в поставке? |
[22.08.11] | Комментировать |
Теги: how-to, примеры, инструкция, гаджеты, |
Вернуться к списку |
(Партнер) 29.08.11 12:59
Молодцы, давно ждали такого функционала. Частенько клиентов не удовлетворял просмотр картинок в стандартном фотоальбоме, хотели как на Яндексе или Вконткте. Приходилось ставить чужие дополнительные скрипты, отдельно готовить изображения... Теперь все в прошлом! Спасибо!
|
|
09.09.11 11:45
Клево было бы еслибы анонс товаров можно было такой каруселькой сделать. Вот это было бы действительно клево!
|
(Амиро) 21.09.11 18:30
Vitaliy Sadomskiy:Каруселька присутствует во всех местах, где есть визуальный редактор. То есть и в анонсе товара. |
(Партнер) 11.10.11 05:02
Alex:Vitaliy Sadomskiy:Каруселька присутствует во всех местах, где есть визуальный редактор. То есть и в анонсе товара. Можно по русски, это как аннонс товара каруселью |
(Амиро) 13.10.11 06:42
volfernion _DVM: Имелось в виду, что можно вставлять карусель в визуальном редакторе в анонс или описание товара или категории. Это решения для пользователя. Специалист может настроить шаблон карточки товара или анонса товаров, в общем любой шаблон где выводятся изображения аналогично подходящему шаблону гаджета Ленты изображений. Кроме того, во всплывающем окне увеличенного изображения можно отображать кнопку Купить, название категории или рубрики и описание товара и т.п. Кому интересно могу скинуть пример работы в личку, а решение предлагаю обсудить на форуме. |
09.12.11 15:32
Андрей, скиньте, пожалуйста, такой пример мне в личку!
Андрей:volfernion _DVM: Андрей, скиньте, пожалуйста, пример работы мне в личку! Еще вопрос, выше представлен пример когда лента вертикальная и находится слева. Хочу сделать так же, только мне это нужно в описании товара, а слева отображается информация только по свойствам. Поэтому я могу лишь внизу сделать горизонтальную Подскажите, пожалуйста, как это сделать?? Спасибо! |
(Амиро) 12.12.11 06:53
Светлана: Посмотрите, как это сделано на новой демонстрационной версии, возможно этот вариант Вам подойдет: |
16.12.11 23:55
Спасибо за ссылку!
Скажите, пожалуйста, где можно прочитать каким образом настроить такую ленту? |
19.12.11 17:00
Светлана:Для реализации вывода нескольких изображений для товара, под его основным изображением, с фунцией их листания, необходимо: 1) Задать дополнительные свойства с типом "Изображение". Так, на демо сайте - дополнительные изображения - это дополнительные свойства товаров, с номерами от 26 до 35. 2) Затем, необходимо кастомизировать вывод созданных свойств. Сделать это возможно в шаблоне _eshop_item_list.tpl. Так, к примеру, эти свойства кастомизированы для вывода в сетe на демо-сайте: <!--#set var="itemD_custom_field_26; itemD_custom_field_27; itemD_custom_field_28; itemD_custom_field_29; itemD_custom_field_30; itemD_custom_field_31; itemD_custom_field_32; itemD_custom_field_33; itemD_custom_field_34; itemD_custom_field_35" value="##custom_field##"--> 3) далее, в сете карточки var="itemD_detail" задан блок для вывода этих свойств-изображений: <div class="block_pict"><div class="small_picture_wrapper">##picture##</div> <div class="announce_slider"> <span id="left_t"><div class="imagetapeControlSmall left" id="prev-listaddIm"></div></span> <div id="slider-listaddIm" style="height: 62px;" class="slider_announce_list"> <div class="container-list" id="slider-listaddIm_sl" style="position:relative;"> ##if(custom_field_26 != '')##<img data-ami-mbpopup="##custom_field_27##" data-ami-mbgrp="##item_header##" data-ami-mbhdr="##item_header##" src="##custom_field_26##">##endif## ##if(custom_field_28 != '')##<img data-ami-mbpopup="##custom_field_29##" data-ami-mbgrp="##item_header##" data-ami-mbhdr="##item_header##" src="##custom_field_28##">##endif## ##if(custom_field_30 != '')##<img data-ami-mbpopup="##custom_field_31##" data-ami-mbgrp="##item_header##" data-ami-mbhdr="##item_header##" src="##custom_field_30##">##endif## ##if(custom_field_32 != '')##<img data-ami-mbpopup="##custom_field_33##" data-ami-mbgrp="##item_header##" data-ami-mbhdr="##item_header##" src="##custom_field_32##">##endif## ##if(custom_field_34 != '')##<img data-ami-mbpopup="##custom_field_35##" data-ami-mbgrp="##item_header##" data-ami-mbhdr="##item_header##" src="##custom_field_34##">##endif## </div> </div> <span id="right_t"><div class="imagetapeControlSmall right" id="next-listaddIm"></div></span> </div> </div> |
03.11.11 19:06
Шаблон imagetype_nopopup.tpl, самый первый пример в этой статье.
Вопрос: Как и где задать ограничение на максимальный размер увеличенного изображения (того, что выводится над каруселью)???? И уменьшенных, тех, что в самой карусели? Если изображение в большом разрешении, то оно разносит экран в ширину или высоту (корёжит вёрстку). Удивительно почему в свойствах гаджета нет полей в которых задавались бы параметры максимальных и минимальных размеров изображения, как для карусели, так и для увеличенных. По моему это логично. P.S. Вопрос 2: Гаджет по умолчанию сдвинут в левый край, и выровнять его по центру (например засунув в ДИВ и задавав выравнивание в центр) не удаётся. Как это сделать? |
(Амиро) 15.12.11 15:25
1) Открываете стили (Менеджер сайта -> Редактировать макет -> Глобальные стили CSS), создаете класс:
.it_main_image img { width: 200px; } где width - ограничение непосредственно по ширине большого изображения. Можно управлять напрямую инлайн стилями (width, height, max-width и max-height), как малого, так и большого изображения, в шаблоне imagetype_nopopup.tpl (Менеджер сайта -> Шаблоны модулей, сет var="image" - малые изображения). 2) В том же шаблоне imagetype_nopopup.tpl - задать таблице (table) параметр align=center. |
19.12.11 22:38
Сергей, спасибо за подробный ответ!
Мне не понятно каким образом на демо-сайте сделаны ссылки на детальное описание товара. Например, там есть новинки, и вот когда наводишь на товар из категории новинок, то есть возможность перейти на детальное описание товара. Я сделала ссылку на детальное описание товара через настройку всплывающего изображения в самой ленте, но у меня эффект другой, т.е. при наведении есть возможность увеличить картинку и при увеличении название ссылки есть под изображением и ссылка открывается в новом окне...в общем не то Т.к. как сделать, что бы при наведении на изображение в ленте был сразу переход на детальное описание товара, в общем как на демо-сайте. Заранее благодарю. |
(Партнер) 19.03.12 00:10
в IE7 imagetape.tpl растягивает страницу (даже эту) подскажите как можно решить данную проблему???
|
(Партнер) 14.05.12 20:40
Попробуйте обновить ИЕ до 8го. К сожалению технологии не стоят на месте, и вы либо их используете на более технологичных браузерах (хром, мазила, опера) или не пользуете по причине неадекватного отображения в ИЕ 6, 7.
|
28.01.14 18:23
аАвот у меня слайдер из трех изображений и каждое должно вести в отдельное место. Можно ли поставить линк на каждое изображение?
|
15.12.14 20:35
1
matadjo: Тоже был озадачен этим вопросом, но кто же тут ответит - спустя столько лет? А ответ, тем не менее, прост: в своей копии шаблона imagetape_autoplay.tpl я закомментировал верхнюю строчку, а ее суть использовать дальше - вокруг подставляемых движком картинок. Было: <a class="links_fullinfo" id="links_fullinfo_##group##" href="#"><span id="urlcapt_##group##"></span></a> </div> <div class="right_imagetape_fullinfo"> <img src="/_img/spacer.gif" id="image-##group##"/> </div> Стало: ##--<a class="links_fullinfo" id="links_fullinfo_##group##" href="#"><span id="urlcapt_##group##"></span></a>--## </div> <div class="right_imagetape_fullinfo"> <a class="links_fullinfo" id="links_fullinfo_##group##" href="#"><span id="urlcapt_##group##"></span><img src="/_img/spacer.gif" id="image-##group##"/></a> </div> |