Изображение
Это один из тех плагинов, которые:
  • 1. вставляем код
    2. запускаем
    3. все работает
Перед закрывающим тегом </head> ставим:

Код: Выделить всё

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
<script src="/jquery.ticker.js" type="text/javascript"></script>
<script type="text/javascript">
 $(function () {
  $('#js-news').ticker(); });
</script>
  • Для работы плагина требуется jQuery (1.4.2 или выше)
CSS:

Код: Выделить всё

/* Ticker Styling */
.ticker-wrapper.has-js {
	margin: 20px 0px 20px 0px;
	padding: 0px 20px;
	width: 780px;
	height: 32px;
	display: block;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	background-color: #f8f0db;
	font-size: 0.75em;
}
.ticker {
	width: 710px;
	height: 23px;
	display: block;
	position: relative;
	overflow: hidden;
	background-color: #f8f0db;
}
.ticker-title {
	padding-top: 9px;
	color: #990000;
	font-weight: bold;
	background-color: #f8f0db;
	text-transform: uppercase;
}
.ticker-content {
	margin: 0px;
	padding-top: 9px;
	position: absolute;
	color: #1F527B;
	font-weight: bold;
	background-color: #f8f0db;
	overflow: hidden;
	white-space: nowrap;
	line-height: 1.2em;
}
.ticker-content:focus {
	none;
}
.ticker-content a {
	text-decoration: none;	
	color: #1F527B;
}
.ticker-content a:hover {
	text-decoration: underline;	
	color: #0D3059;
}
.ticker-swipe {
	padding-top: 9px;
	position: absolute;
	top: 0px;
	background-color: #f8f0db;
	display: block;
	width: 800px;
	height: 23px; 
}
.ticker-swipe span {
	margin-left: 1px;
	background-color: #f8f0db;
	border-bottom: 1px solid #1F527B;
	height: 12px;
	width: 7px;
	display: block;
}
.ticker-controls {
	padding: 8px 0px 0px 0px;
	list-style-type: none;
	float: left;
}
.ticker-controls li {
	padding: 0px;
	margin-left: 5px;
	float: left;
	cursor: pointer;
	height: 16px;
	width: 16px;
	display: block;
}
.ticker-controls li.jnt-play-pause {
	background-image: url('/images/controls.png');
	background-position: 32px 16px;
}
.ticker-controls li.jnt-play-pause.over {
	background-position: 32px 32px;
}
.ticker-controls li.jnt-play-pause.down {
	background-position: 32px 0px;
}
.ticker-controls li.jnt-play-pause.paused {
	background-image: url('/images/controls.png');	
	background-position: 48px 16px;
}
.ticker-controls li.jnt-play-pause.paused.over {
	background-position: 48px 32px;
}
.ticker-controls li.jnt-play-pause.paused.down {
	background-position: 48px 0px;
}
.ticker-controls li.jnt-prev {
	background-image: url('/images/controls.png');
	background-position: 0px 16px;		
}
.ticker-controls li.jnt-prev.over {
	background-position: 0px 32px;		
}
.ticker-controls li.jnt-prev.down {
	background-position: 0px 0px;		
}
.ticker-controls li.jnt-next {
	background-image: url('/images/controls.png');	
	background-position: 16px 16px;	
}
.ticker-controls li.jnt-next.over {
	background-position: 16px 32px;	
}
.ticker-controls li.jnt-next.down {	
	background-position: 16px 0px;	
}
.js-hidden {
	display: none;
}
.no-js-news {
	padding: 10px 0px 0px 45px; 
	color: #F8F0DB;
}
.left .ticker-swipe {
	/*left: 80px;*/
}
.left .ticker-controls, .left .ticker-content, .left .ticker-title, .left .ticker {
    float: left;
}
.left .ticker-controls {
    padding-left: 6px;
}
.right .ticker-swipe {
	/*right: 80px;*/
}
.right .ticker-controls, .right .ticker-content, .right .ticker-title, .right .ticker {
    float: right;
}
.right .ticker-controls {
    padding-right: 6px;
}
HTML структура нашей ленты:

Код: Выделить всё

<div id="ticker-wrapper" class="no-js">
	<ul id="js-news" class="js-hidden">
		<li class="news-item">Новость номер 1</li>
		<li class="news-item">Новость номер 2</li>
		<!-- И так далее -->
	</ul>
</div>

Небольшие настройки:

Код: Выделить всё

$(function () {
$('#js-news').ticker(
 speed: 0.10, // Скорость показа новости
 ajaxFeed: false, // Заполнять новостную ленту через RSS канал
 feedUrl: false, // URL RSS канала // должен быть на том же домене, что и лента
 feedType: 'xml', // только XML
 htmlFeed: true, // Заполнять новостную ленту через HTML
 debugMode: true, // Показывать отладочную информацию в консоли
 controls: true, // Показать/спрятать управление плагином true/false
 titleText: 'Latest', // Чтобы удалить название плагина, оставьте эту переменную пустой
 displayType: 'reveal', // Тип анимации - доступно 'reveal' или 'fade'
 direction: 'ltr' // Направление ленты - доступно 'ltr' или 'rtl'
 pauseOnItems: 2000, // Пауза между новостями
 fadeInSpeed: 600, // Скорость появления новости
 fadeOutSpeed: 300 // Скорость исчезания новости
); }); 
Любые изменения в настройках лишь заменят переменные по умолчанию. Таким образом вы можете настраивать то, что вам нужно или вообще ничего не трогать

Что на счет загрузки контента через feed?!
Вам повезло! В последнем обновлении плагина появилась поддержка RSS каналов через ajax!

Код для запуска плагина через RSS канал будет выглядеть следующим образом:

Код: Выделить всё

<script type="text/javascript">
 $(function () {
  $('#js-news').ticker({ htmlFeed: false, ajaxFeed: true, feedUrl: 'URL RSS канала - например http://example.com/rss.xml', feedType: 'xml' });
 });
</script>
Как должен выглядеть XML? Прекрасно подойдет стандартный RSS формат, который описан в вики.

Еще раз отметим, что RSS канал должен быть на том же домене, что и плагин, потому как jQuery не позволяет кросс-доменных запросов.
Если вам все-таки нужен RSS с другого домена, то вам нужно копать в сторону серверной реализации приемки данных или что-то типа JSON прокси.

А пока такой опции в этом плагине нет, но в будущей реализации обязательно будет!

Скачать:
jquery_news_ticker.zip
107.66 КБ 422 скачивания
Комментарии: 4

GoDFaTHeR 18 сен 2012, 18:03 Сообщение

CabinetAdmin писал(а):<script src="/jquery.ticker.js" type="text/javascript"></script>
думаю тут лучше полный путь прописывать
  • 0
На этом сервисе можно cоздать форум бесплатно
Домены для форума ТУТ

CabinetAdmin 18 сен 2012, 19:19 Сообщение

Конечно, само собой, иначе работать не будет.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

vikweb 19 сен 2012, 11:48 Сообщение

CabinetAdmin писал(а):Небольшие настройки:
к примеру, я новичок, полный 0, разжуйте мне неопытному, в каком месте производятся эти настройки?
куда ставить этот код?

Код: Выделить всё

    <div id="ticker-wrapper" class="no-js">
       <ul id="js-news" class="js-hidden">
          <li class="news-item">Новость номер 1</li>
          <li class="news-item">Новость номер 2</li>
          <!-- И так далее -->
       </ul>
    </div>
что именно нужно вписывать, вместо "Новость номер 1 и Новость номер 2"?
и ваще, как и откуда выводятся новости в эту строку?
или вы эту тему создали для уже опытных..., а новичкам это знать не нужно, пусть яндекс и гугл юзают если хотят сделать себе что то подобное?

P.S. прошу прощения, но лично моё мнение, что новички именно над этими вопросами и задумаются.
  • 0

CabinetAdmin 19 сен 2012, 14:48 Сообщение

vikweb писал(а):к примеру, я новичок, полный 0, разжуйте мне неопытному, в каком месте производятся эти настройки?
В конце первого поста есть пример кода, для запуска плагина через RSS канал:
CabinetAdmin писал(а):Код для запуска плагина через RSS канал будет выглядеть следующим образом:

Код: Выделить всё

<script type="text/javascript">
$(function () {
  $('#js-news').ticker({ htmlFeed: false, ajaxFeed: true, feedUrl: 'URL RSS канала - например http://example.com/rss.xml', feedType: 'xml' });
});
</script>
По этому примеру, в скрипт можно устанавливать то, что нужно именно вам.

Как видно из примера, нужные коды нужно вставлять после:

Код: Выделить всё

$('#js-news').ticker({
Например, нам нужно убрать название ленты - LATEST. То код будет выглядеть так:

Код: Выделить всё

<script type="text/javascript">
$(function () {
  $('#js-news').ticker({ titleText: ' ' });
});
</script>
vikweb писал(а):куда ставить этот код?
А откуда я могу знать куда вам можно устанавливать этот код? :unknown Обычно ставят туда, где хотят увидеть.
vikweb писал(а):что именно нужно вписывать, вместо "Новость номер 1 и Новость номер 2"?
Можно вписать:

Код: Выделить всё

Придайте своему проекту уникальность с <a href="http://cabinetadmina.ru/">http://cabinetadmina.ru/</a>
я буду только рад:)
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!