Вот заметил интересный вывод последних фоток на mail, и решил что такой вывод должен быть и на сайтах юкоз, что получилось уже можно смотреть на скрине анимации.
Компактный по своему замыслу он так же удобен.
Чем привлекателен этот тип, так это тем что дает возможность компактно показывать сразу 3 скриншота кликабельных, и при наведение на один из них который ниже слоем , показывания его весь размер постера.
Вся работа и функциональность происходит благодаря стилям позиционирования и эффекту открывания.
Со временем и потребностью я планирую информер сделать более функциональным и работоспособным для всех модулей сайта, где используются дополнительные или другие формы загрузки изображения к новостям или материалам. Следующие версии вы сможете найти на нашем сайте http://ucozon.ru в теме скриптов для системы юкоз
Внимание код приготовлен и работает только в модуле фотоальбом, так как там используются постеры к большим размерам фотографии, так же создавать можно только для 3 картинок постеров.
Ответы на следующие вопросы:
Можно ли сделать более трех картинок или фото? - Можно если изменить стиль, тем самым его увеличив в двое.
Можно ли сделать меньше трех фото? - можно но не менее двух, так как с одним фото, смысл теряется.
Как изменить размеры картинки? - редактируем высоту и ширину width: 100px; height: 80px; и редактируем объем блока так как он составляет если вы заметили width: 170px; height: 105px;
Установка на свой проект для фотоальбома ucoz:
Постеры к фоткам, должны быть настроены и загружены размерами ширина 100px высота 80px что бы войти в размер, если у вас больше то не беда, картинки обрезаются без проблем.
Создаем информер со следующими настройками смотрим рисунок:
[ Фотоальбомы · Материалы · В случайном порядке · Материалы: 3 · Колонки: 1 ]
И вставляем код, который будет неотъемлемой частью массива в новый созданный блок инфо:
Code
<a class="mf_b1p1Grey f$NUMBER$" href="$FULL_PHOTO_DIRECT_URL$"><i class="mf_a120" style="background-image: url("$PHOTO_DIRECT_URL$");"></i></a>
Этот стиль отвечает за все, за размеры, за эффект позиций, и так же рамка постера, вставляем в таблицу стилей CSS и регулируем по своим размерам:
Code
.mf_b1p1Grey {border: 1px solid #D9D9D9; padding: 1px; background-color: #FFF;}
.foto_slim {position: relative; text-align: center;}
.foto_slim a {position: absolute; text-decoration: none; cursor: pointer; background-color: #FFF;}
.foto_slim a.v1, .foto_slim a.f1 {left:0; z-index: 15;}
.foto_slim a.v2, .foto_slim a.f2 {top:10px; z-index: 10;}
.foto_slim a.v3, .foto_slim a.f3 {right:0; bottom:0; z-index: 5;}
.foto_slim a.f2 {left:38px;}
.foto_slim a.v2 {left:35px;}
.foto_slim a:hover {z-index: 20 !important; zoom:1;}
.foto_slim a b.title { background-color:#FFF; border: 1px solid #D9D9D9; border-top: none; color:#0857A6; display: block; visibility:hidden; font:11px Tahoma; padding:2px 5px; position:absolute; top:90px; left:0; text-align:left; text-decoration:underline; width:98px;}
.foto_slim a b:Hover.title { color:#F26D00; }
.foto_slim a s.time {background-color:#D9D9D9; color:#555555; display:inline-block; font:11px/13px Tahoma; margin:-17px 5px 0; padding:2px; position:absolute; bottom:0; right:0;text-align:right;text-decoration:none;}
.foto_slim a s.time i {border-color:transparent transparent #D9D9D9 transparent; border-style:solid; border-width:0 0 17px 17px; margin-left:-19px; bottom:0; position:absolute;}
.mf_a120 {display:inline-block; width: 100px; height: 80px; background-color: #EFEFEF; background-position: center; background-repeat:no-repeat; font-size:0; line-height:0;}
Заключаем информер в размеры и подключаем сам стиль, вставляем этот вывод куда вам угодно, там где вы хотите видеть фото лесенкой, не забываем только изменить цифру $MYINF_6$
Code
<div class="foto_slim" style="width: 170px; height: 105px;">$MYINF_6$</div>
При копирование новинки , новости, ссылка на сайт ucozon.ru обязательна.
Меню сайта
Меню сайта
