Hi Everyone… I would like to enable arrow key navigation. I found this bit of code doing a webs search…I do not know anything about JavaScript. How do I implement this code in my site. How do I make this work ? My links are dynamically generated PHP links. Here is one of my link sample…
In the code below, I see that there are areas to place my code in. But I am not sure what to do here. Can you help me please…?
Thank you everyone…
$(document).keydown(function(e){
switch(e.which) {
case $.ui.keyCode.LEFT:
// your code here
break;
case $.ui.keyCode.UP:
// your code here
break;
case $.ui.keyCode.RIGHT:
// your code here
break;
case $.ui.keyCode.DOWN:
// your code here
break;
default: return; // allow other keys to be handled
}
// prevent default action (eg. page moving up/down)
// but consider accessibility (eg. user may want to use keys to choose a radio button)
e.preventDefault();
What do you mean by “enable arrow key navigation”
Do you want to let your users navigate through your photos by pressing the left and right arrow keys?
You seem to have a different page for each photo (nice photos by the way).
My first question is: could you not use a slider?
There are many free ones and these have this functionality built in.
You would have all of the images (or sets of images anyway) on the same page, so it would make for a more seamless experience for your users.
Pullo, thank you. I looked in to sliders at first but they seemed to be sluggish when a large amount of photos uploaded with it. I will have 600+ images uploaded there on to this site. Right now it is a PHP generated page. There is only one page and the image is pulled from the database. So far I think this is the fastest method. Then again I am not the expert. So I prefer the existing method but I have seen some sites with arrow key navigation which use JavaScript/JQuery for it. I am not sure how to implement it… And here is a site that uses navigation like I would like to have… http://www.kenkoskela.com/photo/blue-angel/
You create your back/forward arrows, then when a user clicks on them or presses left/right arrow on their keyboard, you send an ajax request to a PHP script on your server. You tell the PHP script what the current photo is and whether the user pressed/clicked forward or back. The PHP script will then answer with the url of the previous/next image, as well as the image’s meta data (title, alt etc). Back in your JS script you then load the image by swapping out the current image’s src attribute with the one returned by the server. You can also alter the address shown in the address bar and update the meta data.
Anyways, could you post the PHP code used to fetch the images (or image paths) etc. from the database?
I’m still thinking about the best way to do this.
So, I’ve been playing with this and have taken the following approach:
I created a table called images with a few entries.
Each row contains the file path, a caption and a slug.
When my page loads, it fires off one AJAX request (you could do this on a per gallery basis) and fetches all of the picture details in JSON format.
It then inserts the image dynamically (changing the src attribute), as well as the caption and appends the slug to the url.
Here’s a first demo.
Navigation works both by clicking “Prev” and “Next”, as well as with the arrow keys.
Pullo…did you just create a whole gallery code !!! Wow… yes I was just looking for a way to get my gallery do arrow key navigation. But of course that’s what I was looking for …and does this handle large number of images well?
I’m not saying that this is the only way.
I’m not even sure that this is the best way.
For example, another idea I had, was that you could have your PHP page echo out the respective links to the “Previous” and “Next” pages, then when a user presses a left/right arrow key, you could simulate a click on said links.
I discounted this originally, as it means loading a whole new page for each image, which might make for a slower, clunkier experience for your users.
Nonetheless, if you are considering more of a PHP solution, then it might be worth asking in the PHP forum.
It will handle them, but I dunno how well.
How large is large?
Pullo…Thank you for being so helpful.I was thinking about this. I think your discounted idea is more appealing to me ( I could be wrong ). And I think if we go with the demonstrated method above we also need to work on creating thumbnails. Since I would like to have thumbnails displayed in a gallery.
If it is not too much can we try the second idea echoing out the links? I am sorry if I am asking too much. Thank you so much for taking your time helping me…
