Foto album met preview afbeeldingen bij mouse on hover zoals op Facebook…..

Nou, deze blogpost lijkt mogelijk op Arabisch meer de functie is dat ik hier mijn gedachten en ideeen probeer weer te geven betreffende een opdracht in de hoop dat ik dit opdracht succesvol zal kunnen uitvoeren:

Opdracht: klant heeft WordPress website en een leuke gallery via een gallery plugin. Nu is hij daar niet tevreden mee. Hij wil extra functionaliteit. De home pagina van de gallery toont een aantal categorieen. Die kunnen we beschouwen als fotoalbums over een bepaald onderwerp. Hij wil dat als de bezoeker met zijn muis over de voorkant van dit fotoalbum beweegt, dat dan automatisch, achter elkaar, een preview getoond wordt van de afbeeldingen binnen dat fotoalbum. Nee, niet onmogelijk. Maar wel moeilijk. Om het nog leuker te maken heeft hij een voorbeeld: de weergave van de fotoalbums in Facebook.

Spioneren van de code binnen Facebook
Dat doe ik meestal: even spieken binnen de code van de website waar de klant het voorbeeld gevonden heeft. Facebook in dit geval. Wat zie ik:

<div id=”u_0_3b” class=”_30l”><span id=”u_0_2f” aria-label=”Photo” class=”uiMediaThumb _30m uiMediaThumbMedium” style=”opacity: 0;”><i class=”uiMediaThumbImg” style=”background-image: url(http://sphotos-a.ak.fbcdn.net/hphotos-ak-ash3/p206x206/530465_10151320424569284_27191678_n.jpg);”></i></span><span id=”u_0_2g” aria-label=”Photo” class=”uiMediaThumb _30m uiMediaThumbMedium” style=”opacity: 0;”><i class=”uiMediaThumbImg” style=”background-image: url(http://sphotos-d.ak.fbcdn.net/hphotos-ak-snc6/p206x206/603007_10151320424504284_10063898_n.jpg);”></i></span><span id=”u_0_2h” aria-label=”Photo” class=”uiMediaThumb _30m uiMediaThumbMedium” style=”opacity: 0;”><i class=”uiMediaThumbImg” style=”background-image: url(http://sphotos-f.ak.fbcdn.net/hphotos-ak-ash4/p206x206/318068_10151320424509284_1098475204_n.jpg);”></i></span><span id=”u_0_2i” aria-label=”Photo” class=”uiMediaThumb _30m uiMediaThumbMedium” style=”opacity: 0;”><i class=”uiMediaThumbImg” style=”background-image: url(http://sphotos-c.ak.fbcdn.net/hphotos-ak-ash3/p206x206/582526_10151320424494284_1473985989_n.jpg);”></i></span><span id=”u_0_2j” aria-label=”Photo” class=”uiMediaThumb _30m uiMediaThumbMedium” style=”opacity: 1;”><i class=”uiMediaThumbImg” style=”background-image: url(http://sphotos-b.ak.fbcdn.net/hphotos-ak-prn1/p206x206/47666_10151320427084284_424829715_n.jpg);”></i></span></div>

Mooie code maar de vraag is nu waar die naartoe verwijzen. Oftewel: in welke file of binnen welk script staat bijvoorbeeld het volgende gedefinieerd?:

class=”uiMediaThumb _30m uiMediaThumbMedium”

Nee, lijkt me op zich niet erg relevant. Dit is tenslotte verwijzing naar css code en betreft niet een script. Code geeft alleen de output weer van het script. Maar welk script genereert deze output? Maar even googlen op: “load preview images mouse on hover”. Geen succes. Of: “how to have images load on mouse over in wordpress plugin”. Veel informatie, nog geen antwoorden.

Mijn test op jsfiddle.com

debugmeester.nl, dewebmeester repareert via tweakweb.nl

Sinds een week ben ik als ontwikkelaar werkzaam bij tweaky.com. Een grappige uitdaging gezien het feit dat ik tweaky.com op mijn eigen website benoem als concurrent met 3 maal zo hoge tarieven als dewebmeester. (Zie: http://www.dewebmeester.nl/index.php/tarieven-overzicht-van-opties) Hun werkwijze spreekt mij echter erg aan en ook na afronding van de eerste opdrachten ben ik erg te spreken over het idee achter tweaky.com.

Idee: iedereen met een website heeft zo nu en dan een ontwikkelaar nodig om kleinere aanpassingen of reparaties te doen. Dan wil men niet direct teveel uitgeven maar heeft ment nog wel 39 Euro over voor zo’n aanpassing. Zo’n aanpassing heeft een Tweak en ik ben dus een Tweaker. Daarom begin ik direct met een eigen concept en dat heet tweakweb.nl.

Via de opdrachten die bij tweaky.com binnenkomen (en waar je dus 3 maal zoveel betaald om vervolgens door dezelfde persoon – “dewebmeester”- geholpen te worden), is veel te leren. Elke opdracht is een ontdekkingstocht. Dus dacht ik: laat ik nou eens uitleggen via dit blog hoe ik als dewebmeester tot oplossingen kom. Omdat ik ongeveer elke werkdag 1 tot 2 tweaks afhandel, kan dat leiden tot 1 a 2 extra blogposten per dag. Naar mijn verwachting betreft het problemen en bugs waar heel veel anderen mee te maken krijgen die een eigen website beheren. En zo wordt dewebhulp.nl (dit blog) mogelijk nog meer een webhulp. Even een lijstje met tweaks die ik ben tegengekomen:

1. uitlijnen van widget in WordPress
2. validatie volgens W3 en errors oplossen
3. lightbox laten werken in WordPress, en dan ook voor de video’s
4. plaatsen Facebook button
5. aanpassen kleuren
6. plaatsen tekst binnen Shopify theme
7. maken clickable map
8. contactformulier repareren
9. 4ormat website layout aanpassen
10. update problemen WordPress
11. tot en met 1001: alle frustraties waar u zelf tegen aan loopt bij het werken aan een website.

Bedenk hierbij dat een tweak geen 39 Euro hoeft te kosten. Diezelfde tweak kan ook 9,90 kosten. Maar dan wel alleen via een abonnement van  www.dewebmeester.nl

Hartelijke groeten,

Meindert A. Jorna

Online uitpakken (unzip) op eigen server

Probleem (uitdaging): Ik wil een website installeren op een online server en de ontwerper stuurt een compleet .zip bestand. Prima. Ik kan dit gaan uitpakken, alle bestanden uploaden en verdere aanpassingen doen. Maar dit uploaden kan zo maar een half uur duren omdat een complete Joomla installatie inclusief design en extensies meer dan 10.000 files kunnen bevatten. Filezilla is daar we even mee bezig. Ik wil snel omdat ik bijvoorbeeld liever tien demonstratie websites installeer in plaats van een half uur te wachten op Filezilla.

Mogelijkheid 1: gebruik de uitpak functies van hosting account

Image via CrunchBase

Cpanel of andere admin panels van een hosting account hebben bijna altijd wel deze ingebouwde functie. De uitpak (unarchive) functie zit bij sommigen verstopt in de filemanager maar ik zie ook wel eens een aparte “Archive Gateway”. Dat werkt meestal wel redelijk. Maar vandaag niet.

Mogelijkheid 2: een php script
En de meest simpele en erg efficiente (binnen een halve minuut waren deze 10.000 bestanden netjes uitgepakt op de server en ik hoefde dus alleen het .zip bestand te uploaden) is: http://www.phoca.cz/phoca-server-unzip , de unzip tool van Phoca. Ik kende Phoca van Phocagallery voor Joomla en dat is een prima gallery tool. En deze unzip tool blijkt ook prima te werken. Nee, niet direct. De map (tool_phoca_server_unzip) met de paar bestandjes moeten worden geupload naar de server binnen de map waar ook het .zip bestand zich bevindt. Vervolgens surf ik met Firefox naar deze map (http://www.mijnwebsite.nl/mapmetzipbestand/tool_phoca_server_unzip/ ) en ik krijg een aantal errors. Waarom? Geen idee. Ik pas wat permissies aan via Filezilla en schoon de cache op van de browser, Ctrl F5 en de tool werkt. Hier kan ik de FTP laag inschakelen (en ondertussen zie ik dat de tool het .zip bestand al gevonden heeft) en dat doe ik niet. Ik schakel de laag uit via FTP laag = 0 en klik op “unzip”. Vervolgens wacht ik een twintigtal seconden en alle bestanden worden netjes uitgepakt.

Tjonge dat scheelt! Bedankt Phoca voor deze GRATIS tool.

Ir. Meindert A. Jorna (Msc.)

Savornin Lohmanstraat 45

6702BN Wageningen

☎ 0317 795149

Mob. 06 412 86716

☒ info

www.dewebmeester.nl

My profiles: Facebook LinkedIn Flickr Twitter

Frustratie: een simpele Facebook like button op een WordPress website

Tjonge, wat kan iets simpels soms moeilijk te realiseren zijn. Een Facebook Like button bijvoorbeeld binnen een WordPress website.

Om een Faceboot button te plaasten binnen een (gewone) website, is het aan te raden de developers versie te gebruiken die door Facebook zelf onderhouden wordt:
http://developers.facebook.com/docs/reference/plugins/like/ Makkelijk te maken en niet moeilijk te integreren. Voor een WordPress website denk je al snel aan een kant en klare plugin of widget. Ja die zijn er genoeg: “Facebook button plugin” of “Facebook widget”of “Facebook likebox”. Zie de onderstaande afbeelding:

Zo, wat is dan het probleem? Het probleem is dat het niet werkt. Of de layout is niet goed, of er wordt niets getoond of de button werkt niet. Ja, de eerstgenoemde in de afbeelding (“Facebook”) lijkt te werken. Ja die werkt. Enige probleem is mogelijk dat ik even geen optie kan vinden om de button gewoon binnen een widget te laten verschijnen. Ook worden “faces”niet getoond en is het vrij ingewikkeld om de applicatie te laten werken want: er moet eerst een Facebook applicatie aangemaakt worden en gekoppeld worden aan applicatie domein etc. Het LIJKT te werken want na klikken op “like”, krijgt de like button counter + 1 maar deze like is vervolgens niet terug te vinden op mijn profiel in Facebook. Dat zou toch moeten?

Uiteindelijk val ik weer terug op de standaard Facebook developers code: http://developers.facebook.com/docs/reference/plugins/like/ , maak de parameters aan en plaats gegenereerde code binnen een html widget. Ja, de button wordt netjes getoond. Nee, de button werkt niet. De send button lijkt overigens wel prima te werken. Tenminste iets. Probeer de script code van Facebook te plaatsen achter <body> tag van header.php maar dat verandert niets. Helaas. Nog steeds niet naar behoren opgelost. Maar moet nu eerst even werken aan belastingaangifte voordat ik hier mee aandacht aan kan geven. Reacties, adviezen en andere commentaren zijn gewenst.

Aanvulling: twee problemen ontdekt

En zo heb ik tenminste alweer twee problemen opgelost:

1) De Facebook pagina id was fout. Die is op zich makkelijk te vinden door naar de pagina te gaan en op de timeline foto of profiel foto te klikken. Dan verschijnt er in de browser iets als: http://www.facebook.com/photo.php?fbid=424986770863567&set=a.424986767530234.107018.139250686103845&type=1&theater waarbij het laatste getal de facebook pagina id is, in dit geval: 139250686103845

2) De klant blijkt nog helemaal geen Facebook pagina te hebben en zijn profiel pagina aan mij doorgegeven te hebben. Nee, voor profielpagina’s kun je geen “likes”verzamelen omdat het geen pagina is. Dus wel eerst even een pagina aanmaken.

facebook logo (Photo credit: marcopako )

Related articles

• How To Add the Facebook Like Button to Your Website (epiphanysolutions.co.uk)