Информация о фильме при наведение


Информация о фильме при наведение

625
8.6 из 10
Проголосовало: 12






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

Установка:

1) Панель управления ---> Управление дизайном ---> Нужный модуль ---> В вид материалов, и вставляем куда нужно данный html-код:

Код

<div class="MiniPostDopInfo">  
  <a href="" class="pull-left popupinfo">Тут текст или иконка</a>  
  <div class="MiniPostDopInfoIcon">  
  <div class="MiniPostDopInfoForm">  
  <div class="b-pp_content_arrow_l"></div>  
  <div class="b-pp_content_arrow_r"></div>  
  <div class="MiniPostDopInfoContent">  
  <div class="DopInfoContentTitle">  
  <a href="$ENTRY_URL$">$TITLE$ </a>  
  </div>  

  <div class="DopInfoContentEx">  
  Режиссёр: $AUTHOR_NAME$  
  <div class="DopInfoContentRating"></div>  
  Премьера (мир): $OTHER2$  
  <div class="DopInfoContentRating"></div>  
  Опубликовано: $DATE$ в $TIME$  
  <div class="DopInfoContentRating"></div>  
  </div>  
  </div>  
  </div>  
  </div>  
  </div>


2) Панель управления ---> Управление дизайном ---> Таблица стилей (CSS), и всамый низ вставляем данный css-код:

Код

.MiniPostAllForm{width:177px;height:400px;}  
  .MiniPostAllForm{width:177px;height:400px;}  
  .MiniPostAllFormDop{float:left;margin:0 10px;position:relative;}  
  .MiniPost{border:1px solid #F0F0F0;border-radius:5px;overflow:hidden;margin-bottom:3px;}  
  .MiniPost .MiniPostPoster img{display:block;width:177px;height:263px;}  
  .MiniPostName{margin-bottom:3px;}  
  .MiniPostName a{color:#31669B;text-decoration:none;font-size:13px;font-weight:normal;line-height:16px;}  
  .MiniPostName a:hover{text-decoration:underline;}  
  .MiniPostInfo{margin-bottom:3px;line-height:14px;}  
  .MiniPostInfo a{text-decoration:none;line-height:14px;font-size:11px;color:#848484;}  
  .MiniPostInfo a:hover{text-decoration:underline;}  
  .MiniPostAllForm .MiniPostDopInfo{display:none;background:rgba(0,146,219,1);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;margin:8px 0 0 140px;position:absolute;height:27px;width:27px;}  
  .MiniPostAllForm:hover .MiniPostDopInfo{display:block;}  
  .MiniPostDopInfo:hover{background:rgba(0, 0, 0, 0.8);}  
  .MiniPostDopInfo .MiniPostDopInfoForm{border-radius:3px;display:none;position:absolute;padding:5px;background:rgba(0, 0, 0, 0.35);margin:29px 0px 0px -60px;width:400px;z-index:9999999999;}  
  .MiniPostDopInfo:hover .MiniPostDopInfoForm{display:block;}  
  .MiniPostDopInfo:hover .revers{margin:-9px 0px 0px -511px !important;}  
  .revers .b-pp_content_arrow_l{background:#f60;display:none !important;}  
  .b-pp_content_arrow_r{display:none;}  
  .MiniPostDopInfoContent{background:rgba(255,255,255,1);padding:20px 20px 0px 20px;}  
  .MiniPostDopInfoContent > a{float:right;width:116px;height:26px;overflow:hidden;}  
  .MiniPostDopInfoContent > a img{margin: 0 0;}  
  .MiniPostDopInfoContent > a img:hover{margin:-26px 0 0;}  
  .ModalWindowsClickForm{display:none;}  
  .MiniPostAllForm:hover .ModalWindowsClickForm{display:block;cursor:pointer;float:right;position:relative;margin:-226px 8px 0 0;width:27px;height:27px;background:rgba(0,146,219,1);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}  
  .MiniPostAllForm .ModalWindowsClickForm:hover{background:rgba(0, 0, 0, 0.5);}  
  .kp_imdb{width:454px;height:42px;}  
  .kp_imdb_full{width:225px;height:85px;margin:0 37px 0px;}  
  .in_kp_imdb{width:225px;height:41px;padding:0px 0px;float:left;}  
  .in_name{width:225px;height:15px;margin:22px 0 0 0;text-align:center;}  

  .DopInfoContentTitle{display:block;margin:0 10px 8px 0;line-height:15px;font-size:16px;font-weight:normal;color:#363636;}  
  .DopInfoContentEx {margin-bottom:8px;color:#959595;}  
  .DopInfoContentEx a{color:#959595;}  
  .DopInfoContentText{margin-bottom:8px;line-height:18px;font-size:12px;color:#292929;}  
  .DopInfoContentRating{padding-top:8px;border-top:4px solid #F2F2F2;color:#292929;}  

  .RelatedFormTitle{margin:30px 0 6px 0;padding:0;font-size:16px;font-weight:bold;width:688px;float:right;}  

  .MiniPostAllFormRelated{width:142px;height:250px;float:right;margin:0 30px 0 0;}  
  .MiniPostRelated{border:1px solid #F0F0F0;border-radius:5px;overflow:hidden;margin-bottom:3px;}  
  .MiniPostRelated .MiniPostPosterRelated img{display:block;width:140px;height:198px;}  
  .MiniPostNameRelated{margin-bottom:3px;}  
  .MiniPostNameRelated a{color:#31669B;text-decoration:none;font-size:13px;font-weight:normal;line-height:16px;}  
  .MiniPostNameRelated a:hover{text-decoration:underline;}  

  .ContentShowfull{padding:0 !important;width:100% !important;}  

  .popupinfo {  
  position: absolute;  
  }


готово!
Автор публикации: Загрузка
Загрузка
fabio_coentrao, это его n материал
Источник: http://kinowa.at.ua
  • Всего комментариев: 5

BilNoob
0
BilNoob написал: Написано 21 Декабря 2015 в 16:27
Комментарий №3
Подскажите как мне это сделать на моём сайте

Вовчик
0
Вовчик написал: Написано 21 Декабря 2015 в 17:39
Комментарий №4
руками

vover6
0
vover6 написал: Написано 21 Декабря 2015 в 18:28
Комментарий №5
Берешь и вставляешь :3

Betme
+1
Betme написал: Написано 28 Ноября 2015 в 10:25
Комментарий №1
было бы не плохо если - сам вид материалов для фильмов сделать красиво, удобно современно! Этого и не хватает!

fabio_coentrao
0
fabio_coentrao написал: Написано 28 Ноября 2015 в 13:54
Комментарий №2
Будет Вам вид материалов но позже smile

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    205
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 6
    Гостей: 5
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: