регистрация
856материалов
3261комментарий
230тем на форуме
6745пользователей

Делаем информер последних новостей для uCoz


Описание скрипта:

  • Очередная реализация информера на MobilySlider.
  • Информер сделан под темные дизайны.
  • Также не забывайте, что сделать можно не только, информер "Последних новостей"
  • Но и последних файлов, лучших новостей или популярных материалов.
Слайдер становится на паузу и не движется, при наводке мышкой, убираете мышку и слайдер снова движется, что очень удобно для чтения заголовков новостей, если не успел)

И так, начнем установку...

Для того, чтобы информер выглядел как на демо, нужно создать его с такими параметрами:
  • Новости сайта (можно и каталог файлов, смотря для чего создаете)
  • Материалы
  • Дата добавления материала A (это последние материалы)
  • Материалы: 7 (желательно 7, это для того, чтобы выглядело как на демо, 7 пунктов под картинкой)
  • Колонки: 1 (обязательно)
Теперь в шаблон информера вставим данный код:
Код
<div class="item">       
<div id="cont">       
<img id="newsimage" src="$IMG_URL1$">       
<div id="text">       
<h2>$TITLE$</h2>       
$MESSAGE$       
<a href="$ENTRY_URL$" id="readmore">Читать дальше...</a></div></div>       
</div>

Сохраняем, идем в таблицу стилей CSS и ставим стилизацию для информера:
Код
.slider {       
float:left;       
width:600px;       
height:200px;       
position:relative;       
padding:0px;       
}       

.sliderContent {       
float:left;       
width:600px;       
height:200px;       
clear:both;       
position:relative;       
overflow:hidden;       
border:2px solid #333;       
}       

.sliderArrows a {       
display:none;       
}       

.prev {       
display:none;       
}       

.next {       
display:none;       
}       

.sliderContent .item {       
position:absolute;       
width:600px;       
height:200px;       
background: #333;       
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222));       
background-image: -webkit-linear-gradient(top, #444, #222);       
background-image: -moz-linear-gradient(top, #444, #222);       
background-image: -ms-linear-gradient(top, #444, #222);       
background-image: -o-linear-gradient(top, #444, #222);       
background-image: linear-gradient(top, #444, #222);       
}       

.sliderBullets {       
position:absolute;       
bottom:15px;       
left:10px;       
z-index:50;       
margin-left:10px;       
}       

.sliderBullets a {       
display:block;       
float:left;       
text-indent:-9999px;       
outline:none;       
margin-left:5px;       
width:20px;       
height:20px;       
background:url(http://webmaster-ucoz.ru/ucoz/1/img/bullets.png) no-repeat;       
background-position:right;       
}       

.sliderBullets .active {       
background-position:left;       
}       

.sliderContent a {       
outline:none;       
}       

a {       
color:yellowgreen;       
text-decoration:none;       
}       
.sliderContent #cont{padding:10px 10px 10px 20px;display:block;}       

#text{text-align:left;float:right;width:360px;height:128px;color:#ccc;font-size:12px;overflow:hidden;}       
#text h2{font-size:13px;color:#999;color:#c69d33;}       
#readmore{       
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#333));       
background-image: -webkit-linear-gradient(top, #444, #333);       
background-image: -moz-linear-gradient(top, #444, #333);       
background-image: -ms-linear-gradient(top, #444, #333);       
background-image: -ms-linear-gradient(top, #444, #333);       
background-image: -o-linear-gradient(top, #444, #333);       
background-image: linear-gradient(top, #444, #333);       
-webkit-border-radius:1px;       
-moz-border-radius:1px;       
border-radius:1px;       
-webkit-box-shadow: 0 0px 2px #666;       
-moz-box-shadow: 0 0px 2px #666;       
box-shadow: 0 0px 2px #666;       
color:#c69d33;       
float:right;       
display:inline-block;       
font-size:11px;       
font-weight:bold;       
padding:4px;       
position:absolute;       
bottom:20px;       
right:20px;       
}       
#readmore:hover{color:#999;}       
#newsimage{float:left;border:4px solid #222;width:180px;height:120px;margin:10px 10px 0px 0px;}

В нижней части сайта или в глобальном блоке подключим скрипт:
Код
<script src="http://webmaster-ucoz.ru/ucoz/1/js/mobilyslider.js" type="text/javascript"></script>       
<script type="text/javascript">       
$(function(){       
       $('.news').mobilyslider({       
       transition: 'horizontal',       
       animationSpeed:300,       
       bullets: true,       
       autoplay: true,       
       pauseOnHover: true,       
       arrows: false,       
       });       
});       
</script>

Идем на страницу, где хотите видеть информер

И вставляем код информера предварительно скопировав его:
Код
<div class="slider news">       
<div class="sliderContent">$MYINF_1$</div>       
</div>

$MYINF_1$ - это нужно поменять на свой номер информера.


Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 03.08.2015 в 05:00
Материал просмотрен: 4490 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 9 комментариев

Пожаловаться
Сказать спасибо
Источник

9 комментариев


Дмитрий
Дмитрий @Дмитрий 03.08.2015 15:451
+3
Интересный информер и самое главное компактный, и можно красиво оформить на главной страницы сайта, так же думаю прикольно было бы замоделить в материале как похожие материалы в виде слайдера!
А_С
Код
a img {
border:none;
}

А вот от этого, скрипт встаёт криво и некоторые авторские стили кривит. А так интересны информер.
Ромчик
Хорошо, убрал данный код
PersONAIncognito
Возможно, был бы востребован скрипт, который бы (хотя бы на куках) показывал пользователю некий маркер, что с момента его последнего визита в такой-то категории (например, новостей) появились новые материалы... чтобы человек знал, пропустил он что-то или нет. Т.е. не за заданное количество дней, а в принципе с момента последнего визита.
e
Всем привет! А есть ли возможность смены фона в слайдере?
Ромчик
В этом коде меняется цвет:
Код
.sliderContent .item {  
position:absolute;  
width:600px;  
height:200px;  
background: #333;  
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222));  
background-image: -webkit-linear-gradient(top, #444, #222);  
background-image: -moz-linear-gradient(top, #444, #222);  
background-image: -ms-linear-gradient(top, #444, #222);  
background-image: -o-linear-gradient(top, #444, #222);  
background-image: linear-gradient(top, #444, #222);  
}
e
Большое спасибо!
e
Все получилось! Отличный слайдер, не тупит, красивый, удобный код для адаптации под дизайн своего сайта! Респект автору!
Ромчик
Рад что Вам понравился слайдер
avatar
Хотите сайт всего за 10 дней?
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0