Lage en kul bildefeed med automatisk rulling.

I første del denne håndboken vi ga deg detaljert informasjon om hvordan du bruker RSS-koding ( Virkelig enkelt Syndikering) med det formål å publisere gratis nyheter og lenker på et hvilket som helst nettsted.

Hensikten med denne veiledningen er å vise deg hvordan du legger til en større nyhetsmodul, en horisontal nyhetsfeed og en listeformatfeed.

La oss komme i gang. Ideen om å integrere gratis nyhetsinnhold og lenker i din egen nettside eller blogg kan være spennende, men du vil sannsynligvis dekke et større område enn en liten modul med 4 lenker. Dessuten vil du sannsynligvis ønske å integrere en hel liste med nyheter på en gang, i stedet for manuelt å fikle med RSS-koding for å indikere forskjellige kilder. Den ideelle løsningen i denne situasjonen vil det være en nyhetsstrøm beregnet på flere kilder.

Vertikal nyhetsfeedmodul

For å tilpasse feeden din, kopier koden nedenfor til head-delen av en hvilken som helst nettside. Hele utvalget av strenger skal være plassert etter tittelen og metakodene, rett før den avsluttende head-taggen:

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

#feedControl (
marg-top: 20px;
margin-venstre: auto;
marg-høyre: auto;
bredde: 440px;
skriftstørrelse: 16px;
farge: #9CADD0;
}

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

(antallResultater: 6, stablet: sant,
tittel: "Verdensnyheter");
}
google.load("feeds", "1");
google.setonloadCallback(showControl);

Plasser følgende kodelinje på stedet i hoveddelen av dokumentet der du ønsker å vise nyhetsstrømmen:

Som med den lille nyhetsstrømmen vi snakket om i forrige innlegg, er det designalternativer her. For eksempel er marg-venstre-uttrykket i feedControl-delen satt til auto, og dette sentrerer modulen i det aktuelle området.

Hvis du vil flytte den til venstre, er alt du trenger å gjøre å endre spesifisert parameter ved 0px.

#feedControl (
marg-top: 20px;
marg-venstre: 0px;
marg-høyre: auto;
bredde: 440px;
skriftstørrelse: 16px;
farge: #9CADD0;
}
De tre kildene som er inkludert i listen er: CNN, Den nye York Times og Reuters. Hvis du vil endre noen av dem, eller bruke Feed API-koden slik at den dekker alle nyhetsemner, er det bare å erstatte de eksisterende URL-ene med de ønskede.

For å "tvinge" The Times-kilden til å bare kringkaste religionsemnet, må du for eksempel gjøre følgende erstatning:

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

Http://feeds.nytimes.com/nyt/rss/NYRegion
Antall lenker som vises kan også endres. For å endre standard antall nyheter (6) for hver kilde til 4, trenger du ganske enkelt å endre følgende linje:

(antallResultater: 4, stablet: sant,
Når siden er lastet inn, vil modulen se slik ut:

Horisontal nyhetsfeedmodul

Hvis du har plass i brødteksten på en side, vil du sannsynligvis spare så mye plass som mulig der samtidig som du integrerer en horisontal nyhetsstrøm. Et eksempel på en slik feed kan sees på alle store nyhetsnettsteder, inkludert BBC.co.uk.

For å gjøre dette må vi endre oss følgende linjer kode i hodedelen (i koden gitt ovenfor):

(tittel:"", (fjern nyhetskildenavnet fra hvert av de utpekte områdene)

nye GFdynamicFeedControl(feeds, "feedControl",
(horisontalt: sant,
Når siden er lastet opp til serveren etter at endringene er notert, vil du kunne se en horisontal modul slik:

Nyhetsfeed i form av en liste

Som eksempel for flere fri stil nyhetsfeed la oss ta en titt på nyhetsmodulen i listevisning. Det er ikke begrenset av noen grenser, og tekstinnholdet tilpasser seg enhver nettside og tar i bruk den tidligere spesifiserte fonten.

For å komme i gang, plasser følgende kode i head-delen, under tittelen og metakodene, rett før den avsluttende head-taggen:

google.load("feeds", "1")
Deretter, i delen av nettsiden der du må vise nyhetsblokken, legg til følgende kode:

var feedcontainer=document.getElementById("feeddiv")

var feedlimit=10
var rssoutput="Siste regionale nyheter i New York:

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

funksjon displayfeed(resultat)(
if (!result.error)(
var thefeeds=result.feed.entries
for (var i=0; i slik at nettlesere forstår at du har en feed. Og selvfølgelig registrere feeden i søkemotor, for eksempel http://blogs.yandex.ru/add.xml og i katalogen http://blogs.yandex.ru/add-catalogue.xml

Du kan laste ned programmet for å lage RSS-feeder gratis, Rss.php (3 Kb)

Jeg googlet det for deg. Jeg har lenge lett etter en plugin som gjør at jeg raskt og enkelt kan lage en så enkel effekt, uten gigantiske mengder kode og utspekulerte forviklinger. Og jeg fant den og er veldig glad for den. Faktisk skriver jeg også dette innlegget for meg selv, som et bokmerke slik at jeg kan se her neste gang jeg skal lage et bildegalleri med autorulling.

Det er en klassiker her. Vi bruker en ul-liste og pakker den inn i en div. Vi vil sette en plugin på denne div, så den trenger en identifikator. I mitt tilfelle er det en klasse.

Det er viktig at bildene har samme størrelse. Ellers vil det ikke se så imponerende ut. Derfor må du sile og behandle dem.

Du må koble til jQuery. Jeg tror alle vet hvordan man gjør dette. Du må også inkludere jcarousel Lite-biblioteket. Hun gjør alt.

Etter å ha lastet inn siden, må du sette plugin til bildefeeden vår og et mirakel vil skje!

$(function() ( $(".mycarousel").jCarouselLite(( auto: 2000, hastighet: 1000, sirkulær: sann, synlig: 4 )); ));

Dette er alt! Egentlig. Det trengs ikke noe mer. Du trenger ikke å koble til eller konfigurere temaer. Du trenger ikke å gjøre noen kontroller eller skrive tilleggskode. Du har standard kode liste over bilder og et enkelt kall til plugin-modulen med parametere. Slik skal det være. Jeg er glad, for å være ærlig.

OM mulige parametere og deres betydninger kan leses i originalen på plugin-siden. Vel, jeg skal kort fortelle deg hvorfor.

btnPrev - identifikator som definerer "Tilbake"-knappen. Dette er nødvendig hvis du gjør rullekontroll ved hjelp av knapper.

btnNext - identifikator for "Videresend"-knappen.

btnGo - du kan navigere etter elementnummer. Når du klikker på et element, skal karusellen rulle til et spesifikt element. Les mer i dokumentasjonen.

mouseWheel - true/false verdi som bestemmer om karusellen skal rulle når musen rulles. Krever musehjul-plugin.

auto - true/false verdi som avgjør om båndet vil spinne av seg selv.

hastighet - rullehastighet i millisekunder.

lettelser - rulleeffekt. Du kan lage en spretteffekt. Krever easing plugin.

vertikal - kanskje du trenger at bildene roterer vertikalt?

sirkulær - vil båndet stoppe når det når det siste bildet eller vil det snurre i en sirkel?

synlig - hvor mange elementer er synlige

start - hvilket element du skal begynne med

bla – hvor mange elementer du skal bla gjennom

førstart - tilbakeringingsfunksjon, kalt før animasjonen starter

afterEnd - callBack-funksjon kalt på slutten av animasjonen