Приветствую Вас Прохожий | RSS Вторник, 06.12.2016, 20:56
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 18
Гостей: 16
Пользователей: 2
MaDaRa, LESIYI



Главная » Файлы » Скрипты для uCoz » Скрипты информеры

Информер для фотоальбома компактный

Информер для фотоальбома компактный Информер, фотоальбома, компактный
Вот заметил интересный вывод последних фоток на 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 обязательна.
  • Автор\Источник: http://ucozon.ru

    Для того что бы скачать архив необходимо зайти на сайт как пользователь.
    Просмотров: 5814 | Комментарии: 1 | Рейтинг: 5.0/1 | |Категория: Скрипты информеры | Добавил: mdbaner | Дата: 23.09.2011 | Скачали: 0 | Теги: информер, фотоальбома, Компактный
    Похожие новости на нашем сайте
    Коментарий к новости

    Всего комментариев: 1
    1 leonora_   Дата: 19.06.2013  Время: 21:25   [№ 14787]
    Скажите пожалуйста, почему у меня нет изображения? Сделала все по инструкции. Сайт ЗАКРЫТО!!

    Ответ: Ссылки запрещены.


    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]

    Форма входа
    Логин:
    Пароль:


    Поиск


    На форуме

    1 Файловик. Уникальные те...

    0

    2 Куплю сайты в индексе Я...

    1

    3 Куплю сайты с ТИЦ/PR (п...

    9

    4 Предлагаю услуги для ан...

    0

    5 Предлагаю услуги по про...

    0

    6 Комплексный прогон сайт...

    51

    7 Сайт онлайн фильмов на ...

    1

    8 Проблема с таблицей

    9

    9 Отредактировать фото

    2

    10 Уже все перепробовал )

    1


    Подробней о форуме


    Комментарии



    Copyright UcozOn.ru™ © 2008-2016


    Кнопка 88х31 сайта ucozon.ru