Делаем классную ленту изображений с автопрокруткой.

В первой части данного руководства мы дали вам подробную информацию о том, как применять RSS-кодинг (Really Simple Syndication) в целях публикации бесплатных новостей и ссылок на любом сайте.

Целью данного руководства является рассказать вам о том, как добавить больший по объемам новостной модуль, горизонтальную ленту новостей, а также ленту в формате списка.

Давайте же приступим. Идея интеграции бесплатного новостного контента и ссылок в собственный веб-сайт или блог может заинтриговать, но вероятно вам захочется охватить большую область, нежели маленький модуль с 4-мя ссылками. Также, вы вероятно захотите единовременно интегрировать целый список новостей, нежели вручную копаться в RSS-кодинге, чтобы указать разные источники. Идеальным решением в данной ситуации будет лента новостей, предназначенная для нескольких источников.

Модуль вертикальной ленты новостей

Для того чтобы настроить ленту, скопируйте код, приведенный ниже, в головную секцию любой веб-страницы. Весь массив строк должен быть расположен после тэгов title и meta, прямо перед закрывающим тэгом head:

@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");

#feedControl {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
width: 440px;
font-size: 16px;
color: #9CADD0;
}

function showControl() {
var feeds = [
{title:"CNN",
url:"http://rss.cnn.com/rss/edition_world.rss"},
{title:"NY Times",
url:"http://feeds.nytimes.com/nyt/rss/World"},
{title:"Reuters",
url:"http://feeds.reuters.com/Reuters/worldNews"}];

{numResults: 6, stacked: true,
title: "World News"});
}
google.load("feeds", "1");
google.setonloadCallback(showControl);

В том месте в теле документа, где бы вы хотели отобразить новостную ленту, расположите следующую строку кода:

Как и в случае с небольшой новостной лентой, о которой мы говорили в предыдущем посте, здесь присутствуют опции оформления. Например, выражение margin-left в разделе feedControl выставлено на auto, и это центрирует модуль в соответствующей области.

Если вы захотите сместить его влево, все, что вам потребуется, это изменить указанный параметр на 0px.

#feedControl {
margin-top: 20px;
margin-left: 0px;
margin-right: auto;
width: 440px;
font-size: 16px;
color: #9CADD0;
}
Три источника, которые входят в список, это: CNN, The New York Times и Reuters. Если вы захотите изменить любой из них, или использовать код АПИ Feed таким образом, чтобы оно охватывало все темы новостей, то просто замените существующие URL на желаемые.

Например, чтобы «заставить» источник The Times транслировать только тему Религии, вам нужно сделать следующее замещение:

Http://feeds.nytimes.com/nyt/rss/World
поменять на:

Http://feeds.nytimes.com/nyt/rss/NYRegion
Число отображаемых ссылок также может быть изменено. Для того чтобы изменить стандартное количество новостей (6) для каждого источника на 4, вам просто нужно будет изменить следующую строку:

{numResults: 4, stacked: true,
Когда страница будет загружена, модуль будет похож на этот:

Модуль горизонтальной новостной ленты

Если у вас есть пространство в теле какой-нибудь страницы, то вы, вероятно, захотите сэкономить там как можно больше места, и при этом интегрировать горизонтальную новостную ленту. Пример такой ленты можно наблюдать на всех крупных новостных веб-сайтах, включая даже BBC.co.uk.

Для этого нам нужно будет изменить следующие строки кода в головной секции (в коде, который был приведен выше):

{title:"", (remove the news source name from each of the designated areas)

new GFdynamicFeedControl(feeds, "feedControl",
{horizontal: true,
Когда страница будет загружена на сервер после отмеченных изменений, вы сможете наблюдать горизонтальный модуль вроде этого:

Новостная лента в виде списка

В качестве примера для более свободного стиля новостной ленты давайте взглянем на новостной модуль в виде списка. Он не ограничен никакими рамками, и текстовое наполнение адаптируется к любой веб-странице, и перенимает уже ранее указанный шрифт.

Для того чтобы начать, расположите следующий код в головную секцию, под тэгами title и meta, прямо перед закрывающим тэгом head:

google.load("feeds", "1")
Далее, в раздел веб-страницы, где вам необходимо отображать новостной блок, добавьте следующий код:

var feedcontainer=document.getElementById("feeddiv")

var feedlimit=10
var rssoutput="Latest New York Regional News:

function rssfeedsetup(){
var feedpointer=new google.feeds.Feed(feedurl)
feedpointer.setNumEntries(feedlimit)
feedpointer.load(displayfeed)
}

function displayfeed(result){
if (!result.error){
var thefeeds=result.feed.entries
for (var i=0; i, чтобы браузеры понимали, что у вас есть лента. И, конечно же, зарегистрировать ленту в поисковой машине, например, http://blogs.yandex.ru/add.xml и в каталоге http://blogs.yandex.ru/add-catalogue.xml

Бесплатно скачать программу для создания RSS-ленты, Rss.php (3 Кб) можно

Я нагуглил за вас. Я долго искал плагин, который позволит мне быстро и без проблем, без гигантских объемов кода и хитрых премудростей сделать такой простой эффект. И я нашел его и очень рад этому. Фактически, этот пост я пишу еще и для себя, как закладку, чтобы заглянуть сюда когда в следующий раз потребуется сделать галерею изображений с автоскроллом.

Тут классика. Используем список ul и оборачиваем его в div. На этот див мы будем натравливать плагин, так что ему нужен идентификатор. В моем случае это класс.

Важно чтобы изображения были одного размера. Иначе будет смотреться не так эффектно. Поэтому придется напрячься и обработать их.

Нужно подключить jQuery. Как это сделать, думаю, все знают. А еще нужно подключить библиотеку jcarousel Lite. Она все и делает.

После загрузки страницы, нужно натравить плагин на нашу ленту изображений и произойдет чудо!

$(function() { $(".mycarousel").jCarouselLite({ auto: 2000, speed: 1000, circular: true, visible: 4 }); });

Это все! Реально. Больше ничего не нужно. Не нужно подключать и настраивать темы. Не нужно делать какие-то контролы и писать дополнительный код. У вас есть стандартный код списка изображений и единственный вызов плагина с параметрами. Это так, как должно быть. Я в восторге, если честно.

О возможных параметрах и их значениях можно прочитать в оригинале на страничке плагина . Ну а я вкратце переведу вам что зачем.

btnPrev - идентификатор, определяющий кнопку "Назад". Это нужно если вы делаете управление прокруткой с помощью кнопок.

btnNext - идентификатор для кнопки "Вперед".

btnGo - вы можете сделать переход по номерам элементов. При клике на какой-то элемент, карусель должна быть проскроллена на определенный итем. Подробнее написано в документации.

mouseWheel - true/false значение, определяющее будет ли карусель прокручиваться от скролла мышки. Требует плагин mousewheel.

auto - true/false значение, определяющее будет ли лента крутиться сама.

speed - скорость прокрутки в милисекундах.

easing - эффект прокрутки. Можно сделать эффект подпрыгивания. Требует плагина easing.

vertical - может нужно, чтобы картинки крутились вертикально?

circular - будет ли лента останавливаться по достижении последней картинки или будет крутиться по кругу?

visible - сколько элементов видно

start - с какого элемента начинать

scroll - по сколько элементов прокручивается

beforeStart - callBack функция, вызывающаяся до начала анимации

afterEnd - callBack функция, вызывающаяся в конце анимации