WebElement - Лучшие авторские скрипты для вашего сайта и блога
WebElement - это сборник дизайнерских мелочей
А также скриптов, помогающих вам в сайто-строении.
Мы поможем вам сделать сайт красивее, мобильнее и удобнее.
У нас вы можете найти готовые решения на:
HTML, CSS\CSS3, jQuery, JS, плагинам к библиотеке JQ и не только...
Используйте только качественные скрипты на своих сайтах.
Главная » Скрипты »

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

24.10.2012 11:43

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

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

Слайдер становится на паузу и не движется, при наводке мышкой, убираете мышку и слайдер снова движется, что очень удобно для чтения заголовков новостей, если не успел)
И так, начнем...


Для того, чтобы информер выглядел как на демо, нужно создать его с такими параметрами:
Новости сайта (можно и каталог файлов, смотря для чего создаете)
Материалы
Дата добавления материала A (это последние материалы)
Материалы: 7 (желательно 7, это для того, чтобы выглядело как на демо, 7 пунктов под картинкой)
Колонки: 1 (обязательно)

Теперь в шаблон информера вставим данный код:
Code

<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 и ставим стилизацию для информера:
Code
.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://getelement.3dn.ru/materials/black_informer/bullets.png) no-repeat;
background-position:right;
}

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

.sliderContent a {
outline:none;
}

a {
color:yellowgreen;
text-decoration:none;
}

a img {
border: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;}

В нижней части сайта или в глобальном блоке подключим скрипт
Code

<script src="http://getelement.3dn.ru/materials/black_informer/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>

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

$MYINF_1$ - это нужно поменять на свой номер информера.
Все, "информер последних новостей" готов.

Категория: Информеры | Просмотров: 2146 | Добавил: Cradleshel

Теги: информер новостей, Информер для ucoz, информер, Информер на MobilySlider

Всего комментариев: 5
Александр | 28.03.2014 | 23:25
+ (0) -
Вообще не становится,ерунда получается
Cradleshel | 30.05.2014 | 13:17
+ (0) -
Проверено во всех браузерах - все отлично работает.
Опишите вашу проблему и как вы все ставите.
phajnapani | 06.06.2013 | 10:38
+ (0) -
Добрый день. Огромное спасибо за красивый информер. Но вот у меня возникла проблема при его добавлении. Жаль нет возможности скрин прикрепить. Но попробую объяснить. дело в том, что изображение которое должно быть в рамочке рядом с текстом отображается не в рамке а в тексте, рамка при этом остается пустой. Подскажите как исправить?
Cradleshel | 16.06.2013 | 07:51
+ (0) -
Напишите в ЛС, ссылку на сайт и где стоит информер - исправим.
infleims | 31.12.2012 | 09:45
+ (0) -
Спосибо за скрипт,долго ломал мозг, где найти подходящий слайдер для своего проекта.этот слайдер попал в точку.Можно посмотреть в действии http://-O_0-/
Ответ: Смотрится действительно хорошо, но ссылки запрещены в комментариях.
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
«  Октябрь 2012  »
ПнВтСрЧтПтСбВс
1234567
891011121314
15161718192021
22232425262728
293031
Нужен ли новый дизайн?
Всего ответов: 117

Полезная информация

Мы настоятельно рекомендуем вам использовать браузеры последних версий. Нажмите на иконку, чтобы перейти к скачиванию нужного вам браузера

Для правильного отображения сайта, вам понадобится минимальное разрешение экрана 1024 x 768px, оптимальное разрешение: 1280 x 1024px