думаю тут лучше полный путь прописыватьCabinetAdmin писал(а):<script src="/jquery.ticker.js" type="text/javascript"></script>
Это один из тех плагинов, которые:
HTML структура нашей ленты:
Небольшие настройки:
Любые изменения в настройках лишь заменят переменные по умолчанию. Таким образом вы можете настраивать то, что вам нужно или вообще ничего не трогать
Что на счет загрузки контента через feed?!
Вам повезло! В последнем обновлении плагина появилась поддержка RSS каналов через ajax!
Код для запуска плагина через RSS канал будет выглядеть следующим образом:
Как должен выглядеть XML? Прекрасно подойдет стандартный RSS формат, который описан в вики.
Еще раз отметим, что RSS канал должен быть на том же домене, что и плагин, потому как jQuery не позволяет кросс-доменных запросов.
Если вам все-таки нужен RSS с другого домена, то вам нужно копать в сторону серверной реализации приемки данных или что-то типа JSON прокси.
А пока такой опции в этом плагине нет, но в будущей реализации обязательно будет!
Скачать:
- 1. вставляем код
2. запускаем
3. все работает
Код: Выделить всё
<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 или выше)
Код: Выделить всё
/* 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;
}
Код: Выделить всё
<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>
Еще раз отметим, что RSS канал должен быть на том же домене, что и плагин, потому как jQuery не позволяет кросс-доменных запросов.
Если вам все-таки нужен RSS с другого домена, то вам нужно копать в сторону серверной реализации приемки данных или что-то типа JSON прокси.
А пока такой опции в этом плагине нет, но в будущей реализации обязательно будет!
Скачать:
Комментарии: 4
- vikweb
- Сообщения: 13
- Зарегистрирован: 08 окт 2009, 16:43
- Пол: Муж
к примеру, я новичок, полный 0, разжуйте мне неопытному, в каком месте производятся эти настройки?CabinetAdmin писал(а):Небольшие настройки:
куда ставить этот код?
Код: Выделить всё
<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>
и ваще, как и откуда выводятся новости в эту строку?
или вы эту тему создали для уже опытных..., а новичкам это знать не нужно, пусть яндекс и гугл юзают если хотят сделать себе что то подобное?
P.S. прошу прощения, но лично моё мнение, что новички именно над этими вопросами и задумаются.
В конце первого поста есть пример кода, для запуска плагина через RSS канал:vikweb писал(а):к примеру, я новичок, полный 0, разжуйте мне неопытному, в каком месте производятся эти настройки?
По этому примеру, в скрипт можно устанавливать то, что нужно именно вам.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({
Код: Выделить всё
<script type="text/javascript">
$(function () {
$('#js-news').ticker({ titleText: ' ' });
});
</script>
А откуда я могу знать куда вам можно устанавливать этот код? Обычно ставят туда, где хотят увидеть.vikweb писал(а):куда ставить этот код?
Можно вписать:vikweb писал(а):что именно нужно вписывать, вместо "Новость номер 1 и Новость номер 2"?
Код: Выделить всё
Придайте своему проекту уникальность с <a href="http://cabinetadmina.ru/">http://cabinetadmina.ru/</a>
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!