регистрация
856материалов
3341комментарий
239тем на форуме
7060пользователей

Делаем информер последних новостей для 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
Материал просмотрен: 4946 раз
Категория материала: Скрипты для 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
uLike – кнопка «Мне нравится»
Создать сайт вместе с uKit.com
Статистики нашего сайта
Сегодня к нам присоединились: 5 человек
Пользователи и гости сейчас онлайн: 8 Сегодня наш портал посетили: чел
Сейчас на сайте: Admin8068, milan_shubin
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 8
Гостей: 6
Пользователей: 2