voorbeeldcode voor implementeren van covercarrousel en lijsten op je website (of als standalone toepassing)

Collega's,

naar aanleiding van enkele vragen (deze en deze) hier op kenniskantoor en omdat het gewoon leuk is om zoiets te maken heb ik een web-projectje gemaakt dat kan gebruikt worden door iedereen die op basis van een lijst gemaakt met 'Mijn Lijsten' of op basis van een aquabrowserzoekvraag een covercarrousel wil insluiten op z'n webpagina.

Het kan daarnaast eventueel ook gebruikt worden voor een standalone toepassing, bv. om op een grote display of digitale themastand een selectie van je collectie te presenteren.

Meer uitleg over het project, hoe je het gebruikt enzovoort staat op de GitHub-pagina, waar je ook alle bestanden kunt downloaden. Een beetje technische bagage is wel vereist om er mee aan de slag te gaan. Ik plan ook nog wat verbeteringen, hou daarvoor die projectpagina in de gaten.

Bedankt ook aan Jeroen Cortvriendt van de VGC die eerder al gelijkaardige code deelde.

Veel plezier er mee,

groeten,

Kris

Weergaven: 500

Berichten in deze discussie

Permalink Antwoord van Tim Lerno op 29 Juni 2016 op 18.00

Geweldig!  Als ik binnenkort wat tijd kan vrijmaken, dan ga ik dit zeker al eens uittesten op onze blog.

Ik heb in 2008 de html-template van onze Blogger-blog nogal intensief aangepast met allerlei scripts, dus dat gedeelte zou al zeker mogelijk moeten zijn.  Externe scripts opladen kan bij mijn weten inderdaad niet via Blogger, dus hiervoor een (gratis) webhost gebruiken lijkt me noodzakelijk.  Ik ben benieuwd!

Groeten van Tim

Bib Londerzeel

Permalink Antwoord van Tim Lerno op 4 Juli 2016 op 17.32

Dag Kris,

Ik heb er ondertussen al wat mee geprutst.  Het is me nog niet gelukt om het in Blogger geïntegreerd te krijgen.  Ik heb geprobeerd om het <head>-gedeelte aan de html van de blog toe te voegen, waarbij ik ook de links heb aangepast naar de locatie op mijn webserver.  Vervolgens heb ik de inhoud van de <body> van result.html aangepast volgens je instructies en dit toegevoegd aan een bericht (uiteraard zonder de <body>-tags), maar zonder resultaat.  Ook alle scripts uit de <body> toevoegen aan de <body> van de blog en enkel "<div id="contentCarrousel"></div> " opnemen in het bericht geeft geen resultaat.

Mijn volgende probeersel was om dit alles eens uit te proberen in de html/java-widget van Blogger, maar ook daar krijg ik geen resultaat.

Result.html insluiten als iframe werkt wel, maar daar doet Blogger er wat moeilijk over dat mijn gratis webserver blijkbaar geen https-url's aanbiedt, wat volgens Blogger de gebruikservaring zou kunnen beïnvloeden, maar deze melding kan ik gelukkig wel opheffen zonder dat dit op het eerste zicht problemen lijkt te geven.  

Tot zover mijn geknoei :-)

Het goede nieuws is dat ik het toch al stand-alone aan de praat heb gekregen: http://biblonderzeel.eu.pn/result.html  Met config.php heb ik me nog niet geamuseerd: ik ben al heel blij dat ik manueel de xml van een api-lijst naar mijn webserver kan uploaden.

Bij mijn eerste poging had ik een lijst gebruikt met 31 items, waardoor er foutmeldingen kwamen ("fout op pagina 3" & "fout op pagina 2").  Er werden maar 20 van de 31 items getoond.  De titelinformatie stond er telkens vierdubbel (!) bij en de links naar de Aquabrowser werkten niet omdat ook de zoekopdracht vier keer in de url's was opgenomen. 

Ik heb even geprobeerd om stap 2 in result.html uit breiden met een "local_copy_of_feed_page4.xml" (copy/paste van je stukje code voor page3), maar zonder resultaat.

Bij mijn tweede poging heb ik een lijstje gebruikt met slechts 4 items: daar werkt het perfect en zonder foutmeldingen!

Bij mijn derde poging (diegene die nu online staat) heb ik dit lijstje uitgebreid tot 11 items.  De foutboodschap "fout op pagina 2" verschijnt terug, maar de titelinformatie wordt correct weergegeven en ook de links werken correct.

Heb je enig idee wat dit zou kunnen veroorzaken?  Nog andere tips?  Alvast bedankt en chapeau voor het mooie werk!

Groeten van Tim

Bib Londerzeel

Permalink Antwoord van Kris De Winter op 5 Juli 2016 op 16.12

Dag Tim,

die foutmelding 'fout op pagina2' op je werkende standalone versie komt doordat je de 2de pagina van de xml-feed nog niet gedownload en in die map opgeslaan hebt. Dat doe je door te surfen naar de lijst api url die je in de mijn lijsten administratie ziet staan en daar '?page=2' achter te plakken. Enzoverder als er nog meer pagina's zijn.

Normaalgezien zijn er maar 10 items per pagina, maar die 11 van de testlijst die je nu gebruikt hebt staan toch allemaal in het eerste bestand / op de eerste pagina zie ik, waardoor ook dat 11de item toch verschijnt. Ik hou in de logica achter het script rekening met 10 resultaten per xml-pagina. Zal nog eens in de api-documentatie moeten nalezen hoe het komt dat er toch meer dan 10 resultaten in 1 xml-pagina kunnen staan.

Het probleem met de integratie in Blogger is moeilijker vanop afstand te debuggen. Als je de kans ziet om eens naar Antwerpen te komen wil ik wel eens wat tijd maken om dat samen te bekijken. Alvast een tip: ik lees dat je de 'geleende stuff' elders gehost hebt, in dat geval kun je echter net zo goed of beter gebruik maken van de CDN's van Jquery en Slick. Google op 'cdn jquery' en 'cdn slick carrousel' en gebruik de links die zij aanbieden in je <head> sectie. De code die in m'n eigen 'scripts.js' staat kun je dan copy-pasten en tussen <script> </script> tags plaatsen op de  Blogger html pagina waarmee je aan het experimenteren bent.

mvg,
Kris

Permalink Antwoord van Kris De Winter op 5 Juli 2016 op 17.03

Ik herinner me weer hoe het zat. Op de aquabrowser van de provincie Antwerpen is het aantal resultaten op 10 per keer beperkt, dat was ooit om performantieredenen nodig. Bij de overige aquabrowsers krijg je 20 items per pagina. Ik zal de code hier nog aan aanpassen.


Kris De Winter zei:

-knip-

Normaalgezien zijn er maar 10 items per pagina, maar die 11 van de testlijst die je nu gebruikt hebt staan toch allemaal in het eerste bestand / op de eerste pagina zie ik, waardoor ook dat 11de item toch verschijnt. Ik hou in de logica achter het script rekening met 10 resultaten per xml-pagina. Zal nog eens in de api-documentatie moeten nalezen hoe het komt dat er toch meer dan 10 resultaten in 1 xml-pagina kunnen staan.

-knip-

Permalink Antwoord van Tim Lerno op 5 Juli 2016 op 18.17

Inderdaad: ik heb bij stap 2 van result.html "if (aantalitems > 10)" gewijzigd in ">20" en het werkte zonder foutboodschap bij de lijst van 11 items.  Daaronder heb ik "if (aantalitems > 20)"  gewijzigd in ">40"

Daarna heb ik deze lijst uitgebreid tot 31 stuks, '?page=2' toegevoegd aan de api-url en deze opgeslagen en samen met de eerste pagina geupload naar mijn webserver als "local_copy_of_feed_page2.xml".  Ook dat werkt nu perfect.

De eerste lijst van 31 items die ik gisteren probeerde was een oude lijst, die ik eind 2015 gemaakt had.  Vermoedelijk is er ondertussen iets gewijzigd aan de API, want die lijst geeft nog altijd problemen met vierdubbel weergegeven auteurs.  In de links zijn ook telkens links naar de eerste 3 tracks mee opgenomen, waardoor deze niet werken.  Maar met nieuw gemaakte lijsten werkt het dus wel helemaal perfect!

Permalink Antwoord van Tim Lerno op 6 Juli 2016 op 15.03

Ik heb het probleem met Blogger gevonden, maar helaas nog niet helemaal opgelost.  Voorlopig werkt het helemaal perfect... op mijn eigen pc :-)

Het probleem is dat browsers om veiligheidsredenen de api-xml enkel kunnen inladen wanneer die op hetzelfde domein is opgeslagen als de pagina waarop het script staat, zoals je ook hebt aangegeven in je documentatie.  Op mijn eigen pc kan ik dit tijdelijk omzeilen via bv. deze Chrome-extentie voor ontwikkelaars.  Vergeet deze extentie na gebruik niet uit te schakelen, want browsers hebben goede redenen waarom ze dit niet standaard toestaan.  De uiteindelijke veilige oplossing zal vermoedelijk iets met CORS te maken moeten hebben.  Als ik het goed begrijp kan dit enkel wanneer er aan de kant van bibliotheek.be een Access-Control-Allow-Origin-header aan de api-xml wordt toegevoegd, die ofwel alle externe sites toegang geeft, ofwel één of meer specifieke sites.  

Een ander probleem is dat dit vanuit een https-blog of website enkel werkt wanneer de api-xml ook op een https-site staat.  Dit is makkelijk op te lossen door rechstreeks naar de https-api-url van je lijstje te verwijzen (bv. https://mijn.bibliotheek.be/list/api/2016) i.p.v. de xml elders te hosten.  Dit maakt het ook een stuk makkelijker te implementeren, want dan heb je geen eigen webserver meer nodig. 

In bijlage heb ik mijn probeersel alvast samengevat in een experimentele handleiding. 

  

Permalink Antwoord van Tim Lerno op 6 Juli 2016 op 15.09

Hieronder de bijlage die bij mijn vorige reactie ontbreekt :-)

Bijlagen:
Permalink Antwoord van Kris De Winter op 6 Juli 2016 op 17.18

Die cross-domain beveiliging is er inderdaad om goede redenen. Met het CORS-alternatief heb ik ook geëxperimenteerd toen ik het tooltje aan het ontwikkelen was, maar dat kreeg ik niet aan de praat.

Permalink Antwoord van Tim Lerno op 6 Juli 2016 op 17.39

Mij is het ook nog niet gelukt.  De server van cultuurconnect lijkt dit evenwel toe te staan voor alle clients, als ik het resultaat deze testtool goed begrijp: http://test-cors.org/ (getest met https://mijn.bibliotheek.be/list/api/2016)

Permalink Antwoord van Tim Lerno op 6 Juli 2016 op 19.07

Deze testsite geeft een iets duidelijker resultaat: http://online.attacker-site.com/html5/cors/cors_tester.php.  Bij het testen van de publieke api https://api.github.com krijg je resultaat.  Bij https://mijn.bibliotheek.be/list/api/2016 staat er "This option on this page is blocked for reading from this domain."  

Het is dus afwachten of CultuurConnect een Access-Control-Allow-Origin-header aan de api-xml van de lijstjes kan en wil toevoegen. 

Bijvoorbeeld:

<?php header('Access-Control-Allow-Origin: https://biblonderzeel.blogspot.com/'); ?>

Of als iedereen er mee mag spelen:
<?php header('Access-Control-Allow-Origin: *'); ?>

;-)

Permalink Antwoord van Tim Lerno op 6 Juli 2016 op 22.46

Ik heb die CORS voor alle zekerheid al eens uitgetest met de api-xml-bestandjes op mijn webserver en dit werkt!

1) "index.php" aangemaakt op webserver met deze code:

<?php header("Access-Control-Allow-Origin: http://biblonderzeel.blogspot.com");
require( dirname( __FILE__ ) . '/local_copy_of_feed.xml' );

2) "index2.php" aangemaakt op webserver met deze code:
<?php header("Access-Control-Allow-Origin: http://biblonderzeel.blogspot.com");
require( dirname( __FILE__ ) . '/local_copy_of_feed_page2.xml' );

3) Vanuit de code in het blogbericht verwezen naar deze php-bestanden ipv rechtstreeks naar de api-xml:

$.ajax({
url: "http://biblonderzeel.eu.pn/index.php",
dataType: "xml",
success: paginaparser,
...

Dat php-regeltje rechtstreeks vanuit een xml-bestand laten uitvoeren lijkt me nog een ander paar mouwen, maar gelukkig zijn er genoeg alternatieven voor CultuurConnect: http://enable-cors.org/server.html
;-)

RSS

Info

Kenniskantoor heeft dit Ning-netwerk opgericht.

Groepen

© 2024   Gemaakt door Kenniskantoor.   Verzorgd door

Banners  |  Een probleem rapporteren?  |  Algemene voorwaarden