Lav en cool billedfeed med automatisk rulning.

I første del denne manual vi gav dig detaljerede oplysninger om hvordan man bruger RSS-kodning ( Virkelig enkel Syndication) med det formål at offentliggøre gratis nyheder og links på ethvert websted.

Formålet med denne guide er at vise dig, hvordan du tilføjer et større nyhedsmodul, et horisontalt nyhedsfeed og et listeformat-feed.

Lad os komme i gang. Idéen med at integrere gratis nyhedsindhold og links i din egen hjemmeside eller blog kan være spændende, men du vil sikkert gerne dække et større område end et lille modul med 4 links. Du vil sikkert også gerne integrere en hel liste af nyheder på én gang, i stedet for manuelt at skulle pille ved RSS-kodning for at angive forskellige kilder. Den ideelle løsning i denne situation vil der være et nyhedsfeed beregnet til flere kilder.

Lodret nyhedsfeed-modul

For at tilpasse dit feed skal du kopiere koden nedenfor til hovedafsnittet på en hvilken som helst webside. Hele rækken af strenge skal være placeret efter titlen og metatags, lige før det afsluttende head tag:

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

#feedControl (
margin-top: 20px;
margin-venstre: auto;
margin-right: auto;
bredde: 440px;
skriftstørrelse: 16px;
farve: #9CADD0;
}

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

(antalResultater: 6, stablet: sand,
titel: "Verdensnyheder");
}
google.load("feeds", "1");
google.setonloadCallback(showControl);

På det sted i brødteksten af dokumentet, hvor du gerne vil vise nyhedsstrømmen, skal du placere følgende kodelinje:

Som med det lille nyhedsfeed, vi talte om i det forrige indlæg, er der designmuligheder her. For eksempel er margin-venstre-udtrykket i feedControl-sektionen sat til auto, og dette centrerer modulet i det relevante område.

Hvis du vil flytte den til venstre, skal du blot ændre specificeret parameter ved 0px.

#feedControl (
margin-top: 20px;
margin-venstre: 0px;
margin-right: auto;
bredde: 440px;
skriftstørrelse: 16px;
farve: #9CADD0;
}
De tre kilder, der er inkluderet på listen, er: CNN, Det Nye York Times og Reuters. Hvis du vil ændre nogen af dem, eller bruge Feed API-koden, så den dækker alle nyhedsemner, så skal du blot erstatte de eksisterende URL'er med de ønskede.

For at "tvinge" The Times-kilden til kun at udsende Religion-emnet, skal du for eksempel foretage følgende erstatning:

Http://feeds.nytimes.com/nyt/rss/World
skift til:

Http://feeds.nytimes.com/nyt/rss/NYRegion
Antallet af viste links kan også ændres. For at ændre standardantallet af nyheder (6) for hver kilde til 4, skal du blot ændre følgende linje:

(antalResultater: 4, stablet: sand,
Når siden er indlæst, vil modulet se sådan ud:

Horisontalt nyhedsfeedmodul

Hvis du har plads i brødteksten på en side, vil du sikkert gerne spare så meget plads der som muligt, mens du stadig integrerer et horisontalt nyhedsfeed. Et eksempel på et sådant feed kan ses på alle større nyhedshjemmesider, herunder endda BBC.co.uk.

For at gøre dette bliver vi nødt til at ændre os følgende linjer kode i hovedafsnittet (i koden angivet ovenfor):

(titel:"", (fjern nyhedskildens navn fra hvert af de udpegede områder)

ny GFdynamicFeedControl(feeds, "feedControl",
(vandret: sandt,
Når siden er uploadet til serveren efter ændringerne er noteret, vil du kunne se et vandret modul som dette:

Nyhedsfeed i form af en liste

Som eksempel for mere fri stil nyhedsfeed lad os tage et kig på nyhedsmodulet i listevisning. Det er ikke begrænset af nogen grænser, og tekstindholdet tilpasser sig enhver webside og vedtager den tidligere angivne skrifttype.

For at komme i gang skal du placere følgende kode i hovedsektionen under titlen og metatags, lige før det afsluttende head tag:

google.load("feeds", "1")
Derefter skal du tilføje følgende kode i den sektion af websiden, hvor du skal vise nyhedsblokken:

var feedcontainer=document.getElementById("feeddiv")

var feedlimit=10
var rssoutput="Seneste regionale nyheder i New York:

funktion rssfeedsetup())(
var feedpointer=ny google.feeds.Feed(feedurl)
feedpointer.setNumEntries(feedlimit)
feedpointer.load(displayfeed)
}

funktion displayfeed(resultat)(
if (!result.error)(
var thefeeds=result.feed.entries
for (var i=0; i, så browsere forstår, at du har et feed. Og selvfølgelig registrer feedet i søgemaskine, for eksempel http://blogs.yandex.ru/add.xml og i kataloget http://blogs.yandex.ru/add-catalogue.xml

Du kan downloade programmet til at oprette RSS-feeds gratis, Rss.php (3 Kb)

Jeg googlede det for dig. Jeg har længe ledt efter et plugin, der vil give mig mulighed for hurtigt og nemt at skabe sådan en simpel effekt, uden gigantiske mængder kode og snedige forviklinger. Og jeg fandt det, og jeg er meget glad for det. Faktisk skriver jeg også dette indlæg til mig selv, som et bogmærke, så jeg kan kigge her, næste gang jeg skal lave et billedgalleri med autoscrolling.

Der er en klassiker her. Vi bruger en ul-liste og pakker den ind i en div. Vi vil sætte et plugin på denne div, så den har brug for en identifikator. I mit tilfælde er det en klasse.

Det er vigtigt, at billederne har samme størrelse. Ellers vil det ikke se så imponerende ud. Derfor bliver du nødt til at spænde og behandle dem.

Du skal forbinde jQuery. Jeg tror, at alle ved, hvordan man gør dette. Du skal også inkludere jcarousel Lite-biblioteket. Hun gør alt.

Efter at have indlæst siden, skal du indstille pluginnet til vores billedfeed, og et mirakel vil ske!

$(function() ( $(".mycarousel").jCarouselLite(( auto: 2000, hastighed: 1000, cirkulær: sand, synlig: 4 )); ));

Dette er alt! Virkelig. Der skal ikke mere til. Ingen grund til at forbinde eller konfigurere temaer. Ingen grund til at foretage kontrol eller skrive ekstra kode. Har du standard kode liste over billeder og et enkelt kald til plugin'et med parametre. Sådan skal det være. Jeg er glad for at være ærlig.

OM mulige parametre og deres betydning kan læses i originalen på plugin-siden. Nå, jeg vil kort fortælle dig hvorfor.

btnPrev - identifikator, der definerer "Tilbage"-knappen. Dette er nødvendigt, hvis du udfører rullekontrol ved hjælp af knapper.

btnNext - identifikator for knappen "Videresend".

btnGo - du kan navigere efter elementnumre. Når du klikker på et element, skal karrusellen rulle til et bestemt element. Læs mere i dokumentationen.

mouseWheel - sand/falsk værdi, der bestemmer om karrusellen vil rulle, når musen rulles. Kræver musehjul-plugin.

auto - sand/falsk værdi, der bestemmer, om båndet vil snurre af sig selv.

hastighed - rullehastighed i millisekunder.

lempelse - rulleeffekt. Du kan skabe en hoppende effekt. Kræver easing plugin.

lodret - måske skal billederne rotere lodret?

cirkulær - vil båndet stoppe, når det når det sidste billede, eller vil det dreje i en cirkel?

synlig - hvor mange elementer er synlige

start - hvilket element der skal startes med

scroll - hvor mange elementer der skal rulles igennem

førstart - tilbagekaldsfunktion, kaldet før animationen starter

afterEnd - callBack-funktion kaldet i slutningen af animationen