Keyboardnavigatie in php portfolio-site

[Verwijderd]

Voor mijn portfolio-site (www.arnohoogwerf.nl) ben ik op zoek naar een manier om m.b.v. de pijltjestoetsen op je keyboard door de foto's te bladeren. Beetje zoals tegenwoordig op Hyves te zien is, of een nog mooier voorbeeld: www.flickrista.com.

Via het cms-systeem kan ik previous- en next-image links genereren, wat waarschijnlijk vereist wordt om dit werkend te krijgen. Alleen heb ik geen idee wat voor script ik hier verder voor nodig heb om dit aan de pijltjestoetsen te koppelen.

Iemand een tip?

[mithras]

Php heeft hiermee weinig te maken gezien het puur om client side behaviour gaat. Ik zou dus voor javascript kiezen

In js kan je events opvangen, bijvoorbeeld een keypressdown. Daaraan hang je een trigger die kijkt welke toets het is geweest. Als dat de juiste is, kan je een nieuwe location instellen (dus naar een andere pagina gaan).

[joostvanpinxten]

http://www.quirksmode.org/js/keys.html voor wat begrijpelijke en vrij complete informatie over hoe je in javascript de pijltjes-toetsen op kan vangen.

Uit je TS (en titel) merk ik op dat je het idee krijgt dat dit in PHP afgehandeld kan worden? Het is een client-side oplossing en aangezien het het toetsenbord aan de client-side hangt, zie ik geen mogelijkheid om dit server-side op te lossen. Denk hier altijd over na voordat je verder gaat zoeken naar een oplossing!

Succes met het schrijven van de bijbehorende javascript! Bij mij helpt het trouwens heel erg goed om de webdeveloper plugin van FireFox te gebruiken om de javascript fouten eruit te halen.

[te laat, mithras is me voor, maar ik post dit toch omdat de quirksmode een erg handige link is!]

[Verwijderd]

Aha, inderdaad bedankt voor je linkje! Ik ga daar direct even naar kijken. Of het server- of client-side is maakt voor mij niet uit, maar om zo duidelijk mogelijk te zijn in m'n openingspost meldde ik dat m'n site in php gemaakt is. Ik zal toch op een of andere manier aan de server-site de next-/previous-linkjes moeten genereren lijkt me.

[Caelorum]

Wat mischien ook handig is voor hem om te weten is dat de linkjes die zijn cms genereert ook werken met javascript. Die functie kan die dan mooi hergebruiken.

edit:
voor keyboard navigation heb je absoluut geen linkjes nodig. Je kan het met alleen javascript al afhandelen.

[ Voor 27% gewijzigd door Caelorum op 28-09-2009 10:21 ]

[Verwijderd]

Iemand ook een tip waar ik zo'n script die na een bepaalde keypress een andere pagina aanroept kan vinden? De Quirksmode-pagina is handig om te achterhalen welke code welke toets aanroept, maar veel verder dan dat kom ik niet.

Het gaat overigens om pagina's zoals deze: http://www.arnohoogwerf.n...len/ah090906_romy_297.jpg

Hier zou ik dan graag met m'n toetsenbordpijltjes door de andere foto's willen bladeren. Eigenlijk net zoals de thumbnail-navigatie onder de foto, maar dan met m'n toetsen.

[ Voor 39% gewijzigd door Verwijderd op 28-09-2009 10:33 . Reden: Pagina toegevoegd ]

[Verwijderd]

Als je gewoon door wilt linken naar een volgende foto kun je denk ik gewoon location.href = 'uri'; gebruiken.

offtopic:
lmao @ je favicon. Krijg je daar geen gezeik mee? Beeldmerk is vast en zeker niet zo maar te gebruiken

[ Voor 36% gewijzigd door Verwijderd op 28-09-2009 14:50 ]

[Verwijderd]

Verwijderd schreef op maandag 28 september 2009 @ 14:47:
Als je gewoon door wilt linken naar een volgende foto kun je denk ik gewoon location.href = 'uri'; gebruiken.

En hoe kan ik dat dan koppelen aan m'n keyboard-toets? Ik heb echt weinig kaas gegeten van scripting (ben al blij dat ik zover gekomen ben). Wellicht is het voor jullie gesneden koek, maar aan reacties als dat het met javascript makkelijk te doen is, ben ik nog niet echt verder en voel ik me al helemaal een leek

[mithras]

Wat heb je op dit moment al zelf gevonden met termen als (on)keydown en javascript

Vragen om een kant en klaar scriptje is natuurlijk niet de bedoeling, maar c&c willen we best leveren, mits de input er ook is

[Verwijderd]

Je moet dus weten welke toets je hebt ingedrukt. Daarna moet je een slimme manier hebben om er achter te komen welke foto daarbij hoort. Als je dat weet, gebruik je location.href = 'naar deze foto.jpg' om de pagina te vernieuwen.

Zelf zou ik trouwens voor een mooiere oplossing gaan, waarin je de foto via AJAX inlaadt in het betreffende fotodivje. Misschien een beetje ingewikkeld als je net begint met scripten, maar met zoiets als jQuery helemaal niet zo ingewikkeld.

Wat je eigenlijk even zou moeten doen, is bij jezelf een soort stappenplan maken. Wat moet het doen, en hoe zou dat in elkaar moeten zitten? De code is irrelevant, die tik je later pas. Eerst eens goed nadenken over wat de software precies moet doen, en welke problemen zich daarbij kunnen voordoen, en hoe je die kunt oplossen.

[Caelorum]

Verwijderd schreef op maandag 28 september 2009 @ 15:00:
Daarna moet je een slimme manier hebben om er achter te komen welke foto daarbij hoort.

De URL naar de volgende pagina staat al letterlijk in de source code van die pagina. Het grote linkje staat namelijk in een linktag.
Blijft natuurlijk het feit dat hij even een mooi overzichtje moet maken van wat hij nou precies wil. Wat hij daarvoor nodig heeft. Waar dat te vinden is om dat vervolgens een mooie code structuur op te bouwen.

AJAX is in dit geval IMO niet nodig. Het is alleen een extra-tje voor de bezoeker en meer niet.

[Verwijderd]

Wat ik precies wil is niet zo heel moeilijk en heb ik ook duidelijk hierboven uitgelegd. Ik heb een portfolio-pagina waarin ik middels thumbnails een pagina vooruit of achteruit kan bladeren. Ik zou 't echter graag zo maken dat dit ook met de pijltjestoetsen van m'n toetsenbord werkt, zoals op bijv. Hyves of Flickrista.

Uiteraard heb ik gezocht op 'js keypressdown' 'js keyboard navigation' en dat soort termen, maar m'n vraag blijkt lastiger dan ik dacht. Ik hoopte dat er iets simpels zou bestaan als <a href="onkeypress(PIJLTJESTOETS) load '$nextpage'"> maar dat is er blijkbaar niet.

Ik heb niet of nauwelijks ervaring met javascript; alleen van het implementeren van bestaande scripts in m'n site. Via m'n zoekactie kwam ik op een pagina waarin een soortgelijk iets gemaakt werd m.b.v. jquery, zie http://net.tutsplus.com/j...-navigation-using-jquery/ Aangezien ik ook jquery gebruik op m'n site is dat wellicht een optie. Alleen worden er in dit script de keyboard-commando's gebruik om verschillende div's te laten zien, geen andere html-pagina's. Geen idee of dit dus werkend te krijgen is met mijn site.

[ Voor 16% gewijzigd door Verwijderd op 28-09-2009 15:14 ]

[Verwijderd]

Je kunt dan toch die functie Showviakeypress vervangen door location.href="volgende";?

JavaScript:

// listens for any navigation keypress activity
    $(document).keypress(function(e)
    {
        switch(e.which)
        {
            // user presses the "a"
            case 97:    location.href="volgendepagina";
                        break;
        }
    });
});

Alleen nog even opzoeken welke cases er bij de pijltjes toetsen horen.

[Verwijderd]

Het lijkt te werken, althans...we zijn op de goede weg. Loop alleen tegen twee problemen aan. De eerste is dat het lijkt alsof het jquery-script werkt met charCodes, maar de pijltjestoetsen hebben alleen keyCodes en geen charCodes. Klinkt ook wel logisch. Dan zou dat betekenen dat dit alleen werkt met karakter-toetsen, oftwel alleen de letters...hmm.

Als ik op de Quirksmode-site kijk welke code aan een pijltjestoets hang krijg ik:

keypress
keyCode is 39
charCode is 0

Probleem 2 is dat het script echt in de head moet staan, en liefst direct achter de jquery aanroeping. Mijn automatisch gegenereerde prev- en next-links worden pas in de php-pagina daaronder gegenereerd via een 'plogger_get_next_picture_url()' string. Als ik dit zo plat in m'n head-script plak trapt 'ie daar niet in.

Mijn script hoe ik het nu heb staan in de head:

JavaScript:

    <script type="text/javascript">
        $(document).keypress(function(e)
            {
                switch(e.which)
                {
                    // user presses the "a"
                    case 97:     location.href='<?php echo plogger_get_next_picture_url() ?>'
                                break;  
                }
            });
    </script>

Alleen werkt dat stukje php in het javascript niet. Iemand een tip hoe ik dat kan verhelpen?

[ Voor 5% gewijzigd door Verwijderd op 28-09-2009 20:20 . Reden: keyCode toegevoegd ]

[Verwijderd]

En we zijn weer iets verder. Met een beetje Google'en kwam ik op dit script, die gelukkig gewoon in m'n body kan staan. Ik heb 'm werkend gekregen, alleen reageert deze nu op de N-toets (kapitale N, dus Shift+n):

PHP:

        print '
            <script type="text/javascript">
                document.onkeydown = keypressed;
                function keypressed(e) {
                    e = e || window.event;
                    var key = String.fromCharCode(e.keyCode).toUpperCase();
                    if(key == "N") {
                        window.location.href = "'.$next_link.'#picture";
                        }
                    }
            </script>
            
            ';

Ik zie dat dit script reageert wanneer iemand 'N' toetst. Maar hoe kan ik deze dusdanig verbouwen dat deze reageert op m'n pijltjestoets? De keyCode van pijltje naar rechts is 39.

[Icekiller2k6]

print de 'int' waarde is van key als je => doet (pijltje naar links dus..)

[Caelorum]

als je dat script en voorgaande scripts in deze thread vergelijkt gaat er geen belletje rinkelen?

[ Voor 1% gewijzigd door Caelorum op 28-09-2009 21:18 . Reden: typefout :) ]

[Verwijderd]

Icekiller2k6 schreef op maandag 28 september 2009 @ 21:17:
print de 'int' waarde is van key als je => doet (pijltje naar links dus..)

Dit is wat ik krijg met pijltje naar rechts:
keypress
keyCode is 39
charCode is 0

[Verwijderd]

Caelorum schreef op maandag 28 september 2009 @ 21:17:
als je dat script en voorgaande scripts in deze thread vergelijkt gaat er geen belletje rinkelen?

Nee, anders had ik het niet gevraagd hé

Ik had gehoopt, met een beetje vergelijken, dat 'ie het zo zou doen, maar helaas nog geen resultaat:

JavaScript:

            <script type="text/javascript">
                document.onKeyDown = Keypressed;
                
                function Keypressed(keyCode)
                {
                if (keyCode==39)
                {
                window.location.href = "'.$next_link.'#picture";
                                }
                }
            </script>

[Verwijderd]

Het is gelukt! Met een beetje trial & error ben ik wat code weg gaan gooien en hier-en-daar op de gok gaan veranderen. Ik kwam tot het volgende, en hiermee kan ik met de links/rechts-pijltjes heen en weer tussen de foto's, en met pijltje naar boven terug naar de bovenliggende categorie. Wow!!!

JavaScript:

            <script type="text/javascript">
                document.onkeydown = keypressed;
                function keypressed(e) {
                    e = e || window.event;
                    var key = e.keyCode;
                    if(key == "37") {
                        window.location.href = "'.$prev_link.'#picture";
                        }
                    if(key == "39") {
                        window.location.href = "'.$next_link.'#picture";
                        }
                    if(key == "38") {
                        window.location.href = "../";
                        }
                    }
            </script>

Zie bijvoorbeeld deze pagina voor 't resultaat: http://www.arnohoogwerf.n...len/ah090906_romy_245.jpg

Allemaal bedankt voor het meedenken en bijschaven van m'n script-kennis!

[Caelorum]

Verwijderd schreef op maandag 28 september 2009 @ 21:28:
[...]
Nee, anders had ik het niet gevraagd hé

mja ik zei het alleen maar zodat je nog eens beter ging kijken
Ben blij dat het je gelukt is