Lav dit eget slideshow til Flickr

Sådan laver du et slideshow med dine foretrukne skærmbilleder ved hjælp af JavaScript og lidt PHP.

Artikel top billede

(Foto: Computerworld)

Af Redaktionen, Alt om Data

Denne artikel er oprindeligt bragt på Alt om Data. Computerworld overtog i november 2022 Alt om Data. Du kan læse mere om overtagelsen her.

Hvad enten du bruger Flickr til at uploade billeder, se billeder eller begge dele, er her en glimrende metode, når det gælder om at præsentere photostreams. Med en stump PHP til at få adgang til Flickrs RSS-feeds og en lille smule JavaScript til a trække fotos ind og lade dem afløse hinanden kan vi nemt lave slideshows, der ser professionelle ud.

Vi valgte at lade være med at bruge Flickrs API, der kræver, at man lader sig registrere hos tjeneste og skaffer en API-nøgle. I stedet tager vi den langt enklere vej, der består i at skrive et program, der viser fotos fra en photostream-RSS-feed. Det betyder, at vi kun skal skrive kode til at hente et feed og parse de elementer fra det, som vi skal bruge.

I dette tilfælde skal vi kun bruge fotografiernes url’er, og det gør koden meget enkel.Hent et Flickr-feedEnhver Flickr-bruger har sin egen photostream. Hvis man besøger Flickrs hjemmeside (www.flickr.com) eller går til www.flickr.com/photos, kan man klikke på ethvert brugernavn for at se den tilsvarende stream.

Somme tider bliver brugernavnet brugt i url’en til at identificere stream’en, andre gange bliver en id-streng som for eksempel ”42555660@N00” brugt. Når du skal bruge det program, vi laver i denne guide, skal du bruge en af disse to strenge. Vi går ud fra, at du kalder programmet ”flickr.php”, og syntaksen ser sådan ud:

www.server.com/fl ickr.php?u=username. I denne kommando er ”www.server.com” navnet på din webserver (hvis der er tale om en lokal udviklingsserver, kan du bruge ”http://127.0.0.1/”) og ”username” identificerer den pågældende photostream. Det med ”u=” beder PHP-programmet videresende strengnavnet til GET-variablen ”u”.Vi skal bruge nogle få linjer PHP-kode for at komme i gang:

$u=stripslashes($_GET[u]);
$url=”http://flickr.com/photos”;
$rss=file_get_contents(“$url/$u/”);
$rss=strstr($rss,”rss+xml”);
$rss=strstr($rss,”http://”);
$rss=substr($rss,0,strpos($rss,’”’));
$xml=file_get_contents($rss);
$sxml=simplexml_load_string($xml);

Hvis vi ser på koden linje for linje, er det første, der sker, at indholdet af GET-variablen ”u” bliver anbragt i PHP-variablen ”$u” med alle backslash’er fjernet. Backslash’er fremkommer i strengen, hvis der er blevet skrevet en apostrof, og backslash’en står foran den. Da vi ikke vil have backslash’er, bliver de fjernet af scriptet.

Dernæst bliver der skabt en url-streng, der skal til den identificerede photostream i formatet ”http://flickr.com/photos/identifier/”. Nu bliver photostream-websiden hentet ved hjælp af funktionen ”file_get_contents()”, før den bliver parset med det formål at finde den indlejrede RSS-url. Når man ser nærmere på photostream-websider, er der en ”

Den indeholder feed’ens url. AF den grund kalder vi funktionen ”strstr()” og sætter den til at lede efter strengen ”rss+xml”. Den returnerer hele strengen, der begynder ved dette punkt. For kun at udlede url’en kalder vi funktionen igen, men beder den om at finde den næste forekomst af ”http://”, nemlig begyndelsen på RSS-url’en. Så snart vi har den, kalder vi funktionen ”substr()” for at returnere det hele op til url’ens afsluttende markeringer.

Nu, da vi har den ønskede RSS-feed’ens url i hænde, kalder vi igen file_get_contents() for at hente den og gemme dens indhold i ”$xml”. Til sidst bliver $xml parset af ”simplexml_load_string()” ind i variablen ”$sxml”, hvorfra vi kan hente de dele, vi vil.
Nu, da vi har alle vore data gemt og klar til brug, leverer den følgende kode programmets grundlæggende HTML.

Echo <<<_END
<html><head><title>Flickr Slideshow: $u</title><head>
<body bgcolor=black style=”margin:0px;”><font colour=white>
<table border=0 width=100% height=100%><tr><td><center>
<table border=1 width=810 height=610><tr><td valign=top>
<img id=p1 style=”position:absolute” width=800 height=600>
<img id=p2 style=”position:absolute” width=800 height=600>
</td></tr></table></td></tr></table>
<script>
_END;

Kommandoen “echo” bruges i denne form, hvor alt mellem de to ”_END”-tags bliver sendt til browseren. Det bliver brugt frem for simpelt hen at droppe ud af PHP og ind i HTML, så streamens titel kan blive vist rigtigt ved hjælp af variablen $u. Dernæst bliver browserens baggrundsfarve sat til sort, uden nogen margen. For at gøre det muligt at se tekst bliver skriftens farve sat til hvid. Derefter bliver der oprettet to tabeller. Den ene inden i den anden.

Den ydre tabel overtager hele det synlige område, så den indre kan blive centreret. Den indre tabel er der, for at man kan anbringe en ramme omkring slideshow-billederne.

$numpics=0;
foreach($sxml->entry as $item) {
for ($j=0 ; $j < sizeof($item->link); ++$j) {
if (strstr($item->link[$j] [type],”image”)) {
$t=str_replace(‘_m’,’’,$item->link[$j] [href]);
$t=str_replace(‘_t’,’’,$t);
$pics[$numpics++]=$t; } } }

Den første linje indstiller variablen “$numpics” til nul. Det er en tæller, der bliver brugt til at rumme antallet af fotos, der bliver fundet i RSS-feed’en.

Læses lige nu

    Annonce

    Forsvarsministeriets Materiel- og Indkøbsstyrelse

    SAP-medarbejder til Roller & Autorisationer i Forsvarets Cyberdivision

    Københavnsområdet

    Forsvarsministeriets Materiel- og Indkøbsstyrelse

    Senior specialister (Software Defined Network) til Forsvarets nye Digitale Backbone

    Midtjylland

    KMD A/S

    Support Consultant

    Nordjylland

    Computerworld Events

    Vi samler hvert år mere end 6.000 deltagere på mere end 70 events for it-professionelle.

    Ekspertindsigt – Lyt til førende specialister og virksomheder, der deler viden om den nyeste teknologi og de bedste løsninger.
    Netværk – Mød beslutningstagere, kolleger og samarbejdspartnere på tværs af brancher.
    Praktisk viden – Få konkrete cases, værktøjer og inspiration, som du kan tage direkte med hjem i organisationen.
    Aktuelle tendenser – Bliv opdateret på de vigtigste dagsordener inden for cloud, sikkerhed, data, AI og digital forretning.

    Digital transformation | København

    Fra teknolog til strateg: IT-ledelse i en AI- og forretningsdrevet virkelighed

    Hvordan tager du ejerskab over strategi, ledelse og teknologi i en AI-drevet virkelighed? På konferencen møder du frontløbere, der transformerer IT fra servicefunktion til strategisk enabler for forretningen med fokus på cloud, sikkerhed, AI-etik...

    Sikkerhed | Online

    Computerworld Cyber Briefing: Cyberresiliens

    De fleste organisationer har en plan for recovery. Få ved dog, hvilke systemer der skal op at køre først for at holde forretningen i gang. Kom med, når vi ser nærmere på, hvordan Cohesity, Dustin og HPE hjælper organisationer med at definere og...

    It-løsninger | Horsens

    Dynamics AX og FO: Næste kapitel for din virksomhed

    Få overblik over vejen fra Dynamics AX til Finance & Operations – eller løft værdien af Dynamics FO. Hør praksisnære cases om strategi, migration og optimering. Vælg spor, få dyb faglig indsigt, styrk beslutningerne. Tilmeld dig konferencen i...

    Se alle vores events inden for it

    Navnenyt fra it-Danmark

    Norriq Danmark A/S har pr. 1. april 2026 ansat Sascha Trebbien Klinggaard som Lead Consultant. Hun skal især beskæftige sig med at facilitere tæt partnerskab og strategisk behovsafdækning hos vores kunder. Hun kommer fra en stilling som Senior Business Analytics Consultant hos Twoday Kapacity. Hun er uddannet hos Copenhagen Business School og har en Master's degree,Finance & Strategic Management 2014 - 2016. Nyt job

    Sascha Trebbien Klinggaard

    Norriq Danmark A/S

    Norriq Danmark A/S har pr. 1. juli 2026 ansat Nanna-Louise Aae Kudahl som Project Manager. Hun skal især beskæftige sig med drive vores Business Central-projekter i samarbejde med resten af sine nye kollegaer i ERP. Hun kommer fra en stilling som Product Manager hos KMD A/S. Hun er uddannet på Aalborg Universitet i kommunikation og Digitale Medier og har en kandidat i IT-ledelse. Nyt job

    Nanna-Louise Aae Kudahl

    Norriq Danmark A/S

    Genetec har pr. 1. august 2026 ansat Jan Julin som Channel Account Executive. Han skal især beskæftige sig med styrke samarbejdet med partnere og kunder i Danmark, Finland og Baltikum. Han kommer fra en stilling som Senior Business Development Manager hos Dahua Technology. Han har tidligere beskæftiget sig med videoovervågning, adgangskontrol, sikkerhedsteknologi, salg og forretningsudvikling. Nyt job

    Jan Julin

    Genetec

    LCG har pr. 1. september 2026 ansat Thomas Wong, 47 år,  som Director of Cyber & Risk Advisory. Han skal især beskæftige sig med Ansvar for at udvikle LCG’s rådgivning inden for cybersikkerhed, cyberrisiko og GRC. Han kommer fra en stilling som VP of security hos Atea. Nyt job