Новое в блогах


Техноблог HTTPS и Amiro.CMS  1
Техноблог Обновление цен в каталоге интернет-магазина через CSV-файл 
Техноблог Подключаем и используем модуль «SEO Шаблоны»  1
Техноблог Использование модуля «Валюты» в интернет-магазине импортных товаров 
Личный опыт История от «Интер Электрик», #ОбновлениеЗаРассказ 
Личный опыт История от АвтоТехЦентр Субару Медведково, #ОбновлениеЗаРассказ 

Теги



Лента изображений. Примеры использования

Думаю многие успели оценить удобство использования появившихся с версии 5.12 средств работы с изображениями. 

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

Итак, новый гаджет в визуальном редакторе: «Лента изображений». Что это такое и как это использовать.

На сайте нужно показать несколько иллюстраций, с описаниями или без, красиво их расположить, не занимая много места? Значит лента изображений - то, что вам нужно. Мы покажем варианты применения гаджета на примерах.

Примеры использования ленты, с указанием настроек в панели управления.

Для использования гаджета - его необходимо выбрать в панели визуального редактора и наполнить иллюстрациями:

Установить желаемый вид в закладке настроек, в поставку входит несколько готовых шаблонов. Можно выбрать и настроить подходящий:


Результат - лента с детальным просмотром изображения:

*при этом можно прокручивать ленту колесом мыши

 


 

Легкими движениями можно изменить вариант оформления, в настройках:

Результат - лента поменяла прокрутку на вертикальную, появилось два столбца. Детальное изображение теперь слева.




Бывает необходимость показать ленту с детальным просмотром во всплывающем окне. Достаточно переключить настройки на новый шаблон в поставке.


Результат - только лента. Все детали во всплывающем окне с листанием.

*к любому изображению всегда можно задать как свой заголовок, так и описание и даже ссылку на страницу на своём или внешнем сайте.

 


 

Наконец, можно легко использовать ленту в качестве популярного варианта оформления с перелистыванием.


Результат - красивый популярный гаджет.


12345678910111213

* текстовые описания с оформлением можно добавить к любым иллюстрациям.

 


 

Необходимо сделать слайд-шоу? Этот вариант, также предусмотрен.


Лента покажет все изображения автоматически

12345678910111213

 



Мало шаблонов в поставке?
Всегда можно изменить их и даже добавить новые!



Надеемся, что гаджет принесет вам немало приятных моментов.

[22.08.11]  
Рейтинг: 2.364 (голосов: 22)
Комментировать

Теги: how-toпримерыинструкциягаджеты
 
Вернуться к списку
Комментарии (17)

 (Партнер)  29.08.11 12:59
0

Молодцы, давно ждали такого функционала. Частенько клиентов не удовлетворял просмотр картинок в стандартном фотоальбоме, хотели как на Яндексе или Вконткте. Приходилось ставить чужие дополнительные скрипты, отдельно готовить изображения... Теперь все в прошлом! Спасибо!

   31.08.11 22:52
0

да, клёво... и сразу полный функционал

   09.09.11 11:45
0

Клево было бы еслибы анонс товаров можно было такой каруселькой сделать. Вот это было бы действительно клево!

 (Амиро)  21.09.11 18:30
0

Vitaliy Sadomskiy:
Клево было бы еслибы анонс товаров можно было такой каруселькой сделать. Вот это было бы действительно клево!
Каруселька присутствует во всех местах, где есть визуальный редактор. То есть и в анонсе товара.

 (Партнер)  11.10.11 05:02
0

Alex:
Vitaliy Sadomskiy:
Клево было бы еслибы анонс товаров можно было такой каруселькой сделать. Вот это было бы действительно клево!
Каруселька присутствует во всех местах, где есть визуальный редактор. То есть и в анонсе товара.


Можно по русски, это как аннонс товара каруселью

 (Амиро)  13.10.11 06:42
0

volfernion _DVM:
Можно по русски, это как аннонс товара каруселью


Имелось в виду, что можно вставлять карусель в визуальном редакторе в анонс или описание товара или категории. Это решения для пользователя.

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

Кроме того, во всплывающем окне увеличенного изображения можно отображать кнопку Купить, название категории или рубрики и описание товара и т.п.

Кому интересно могу скинуть пример работы в личку, а решение предлагаю обсудить на форуме.

   09.12.11 15:32
0

Андрей, скиньте, пожалуйста, такой пример мне в личку!
Андрей:
volfernion _DVM:
Можно по русски, это как аннонс товара каруселью


Имелось в виду, что можно вставлять карусель в визуальном редакторе в анонс или описание товара или категории. Это решения для пользователя.

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

Кроме того, во всплывающем окне увеличенного изображения можно отображать кнопку Купить, название категории или рубрики и описание товара и т.п.

Кому интересно могу скинуть пример работы в личку, а решение предлагаю обсудить на форуме.


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

Спасибо!

 (Амиро)  12.12.11 06:53
0

Светлана:
Хочу сделать так же, только мне это нужно в описании товара, а слева отображается информация только по свойствам.


Посмотрите, как это сделано на новой демонстрационной версии, возможно этот вариант Вам подойдет: http://business.amiro.ru

   16.12.11 23:55
0

Спасибо за ссылку!
Скажите, пожалуйста, где можно прочитать каким образом настроить такую ленту?

   19.12.11 17:00
0

Светлана:
Спасибо за ссылку!
Скажите, пожалуйста, где можно прочитать каким образом настроить такую ленту?
Для реализации вывода нескольких изображений для товара, под его основным изображением, с фунцией их листания, необходимо:

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
0

Шаблон imagetype_nopopup.tpl, самый первый пример в этой статье.

Вопрос: Как и где задать ограничение на максимальный размер увеличенного изображения (того, что выводится над каруселью)???? И уменьшенных, тех, что в самой карусели?

Если изображение в большом разрешении, то оно разносит экран в ширину или высоту (корёжит вёрстку).

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

P.S.

Вопрос 2: Гаджет по умолчанию сдвинут в левый край, и выровнять его по центру (например засунув в ДИВ и задавав выравнивание в центр) не удаётся. Как это сделать?

 (Амиро)  15.12.11 15:25
0

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
0

Сергей, спасибо за подробный ответ!

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

Заранее благодарю.

 (Партнер)  19.03.12 00:10
0

в IE7 imagetape.tpl растягивает страницу (даже эту) подскажите как можно решить данную проблему???

 (Партнер)  14.05.12 20:40
0

Попробуйте обновить ИЕ до 8го. К сожалению технологии не стоят на месте, и вы либо их используете на более технологичных браузерах (хром, мазила, опера) или не пользуете по причине неадекватного отображения в ИЕ 6, 7.

   28.01.14 18:23
0

аАвот у меня слайдер из трех изображений и каждое должно вести в отдельное место. Можно ли поставить линк на каждое изображение?

   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>

Ваш комментарий