Use keybutton press instead of buttons for nav

[jundo12]

here's the section i think that's using buttons for next and previous. it's allowing the viewer to move in a 3d room at 90 degree angles, one click at a time. i'd prefer to just use the arrow keys on the keyboard instead. anyway to do that?

if( this.totalItems > 1 ) {
this.$navPrev = $( '<span class="gr-prev">prev</span>' ).on( 'click', $.proxy( this.navigate, this, 'prev' ) );
this.$navNext = $( '<span class="gr-next">next</span>' ).on( 'click', $.proxy( this.navigate, this, 'next' ) );
this.$nav = $( '<nav/>' ).append( this.$navPrev, this.$navNext ).appendTo( $gallery );
}

it's from here
http://tympanus.net/Development/3DGa...wallgallery.js
http://tympanus.net/Development/3DGalleryRoom/

[keyboard]

Try adding an event listener for "keydown" then check the key codes.
Left is 37 and right is 39.

Based on the code you provided something like this could work.

if( this.totalItems > 1 ) {
    this.$navPrev = $( '<span class="gr-prev">prev</span>' ).on( 'click', $.proxy( this.navigate, this, 'prev' ) );
    this.$navNext = $( '<span class="gr-next">next</span>' ).on( 'click',  $.proxy( this.navigate, this, 'prev' ) );
    this.$nav = $( '<nav/>' ).append( this.$navPrev, this.$navNext ).appendTo( $gallery );
    
    document.onkeydown = function(e) {
        e = e || window.event;
        if(e.keyCode == "37") {
            $.proxy(this.navigate, this, "prev");
        } else if(e.keyCode == "39") {
            $.proxy(this.navigate, this, "next");
        }
    };
    
} 

[jundo12]

hmmm, it's not working. maybe i am doing something wrong. i've erased the original nav javascript snippet and inserted your version instead. did you look at the full javascript?
http://tympanus.net/Development/3DGa...wallgallery.js the problem is, it isn't always moving in a straight line. every so often it turns a 90 degree corner. in my version of it, it turns that corner once per click, as i have each "wall" limited to displaying one image per wall. so each time the keypress would occur the window would have to display the 90 degree turn. the original nav does that so i'm pretty sure yours could as well, i just don't know why it isn't working.

instead of allowing me to navigate the gallery with the keyboard, it makes the existing buttons turn the room in only one direction instead of either direction (left or right). so not only is it not allowing me to use the keyboard to navigate the gallery, it's breaking the original nav by always turning in one direction regardless of which button is pushed

p.s a working version of the gallery is linked in my first post. its actually demo 2 that i'm using but it shares javascript with demo 1, so that's pretty much irrelevant. notice the foot prints are the buttons by which the gallery is navigated. in my version, the footprints are only left and right arrow graphics instead. i'd prefer not to use the arrow graphics and instead use the left and right arrow keys on keyboard to navigate

[jscheuer1]

I don't see where you tried the code suggested. Maybe you didn't successfully update the file? In any case, you don't need that even if it does work. Instead, you could simply add to the page itself here (at the end of the page, addition highlighted):

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script src="js/wallgallery.js"></script>
		<script>
			$(function() {

				Gallery.init( {
					layout : [3,2,3,2]
				} );

				$(document).keydown(function(e){
					var k = e.keyCode - 38;
					if(k * k === 1){
						if(k > 0){ //next
							Gallery.room.$navNext.trigger('click');
						} else { // prev
							Gallery.room.$navPrev.trigger('click');
						}
					}	
				});

			});

		</script>

Note: The added code is inserted before the closing brace and paran of the existing $(function() { call, but probably can go anywhere valid that also has access to jQuery and the document.

[jundo12]

thanks john! it works! woohoo. and very nicely i might add! the script couldn't be changed over the net because it's not my script. its mit licensed and located at
tympanus.net.