We Keep Coding

how can give arrow key events in full page image silder

How can give arrow key events in full page image slider, for example the below sample link -> https://www.htmllion.com/examples/pure-css-based-fullscreen-slider-demo.html.
I need the same layout with arrow key events.
Kindly help.

Use Keyboard events in Jquery. Based on the user click navigate the page

Using jQuery you can do something like this.
$(window).on('keyup', function(e){
console.log(e.keyCode); // log the keycode of the key pressed
switch(e.keyCode){
case 37:
console.log('Prev');
break;
case 38:
console.log('Up');
break;
case 39:
console.log('Next');
break;
case 40:
console.log('Down');
break;
}
});

You can add a keydown event to any element and call a function.
In the below example i have used an input text field to add a keydown event and it gives alert on pressing left or right arrow key
function myFunction(event) {
var keyVal = event.keyCode;
switch(keyVal)
{
case 37:
alert('Pressed left');
break;
case 39:
alert('Pressed right');
break;
}
}
<input type="text" onkeydown="myFunction(event)">

JS - convert a KBD event into a link click

Still beginner here, please be gentle :)
I have a CSS-lighbox with 3 links: previous image, next image and exit. The links are like that:
<img src="images/prev.png" />
Then i have a KBD listening script:
function kbdNav(e) {
switch(e.keyCode) {
case 37:
// activate link "prev"
break;
case 39:
// activate link "next"
break;
case 27:
// activate link "exit"
break;
}
}
My goal is that when the KBD arrow is pressed (case 37) the link # prev.png gets activated, so that the lightbox image goes to the previous image. Same for the other 2 cases.
What method can be used for this?

First, select the anchor elements:
var prevLink = document.querySelector('.prev');
var nextLink = document.querySelector('.next');
var exitLink = document.querySelector('.exit');
Then edit the listener as follows:
function kbdNav (e) {
switch (e.keyCode) {
case 37:
prevLink.click();
break;
case 39:
nextLink.click();
break;
case 27:
exitLink.click();
}
}

Consider this topic closed. The solution works, but my HTML was quite messily structured.
I found a better solution with a pure JS gallery/lightbox.

Distinguish between left and right click inside onclick function

I need really fast answer. How to distinguish between left and right click inside a function. Code looks like this:
<p onclick="FuncOnClick()">
function FuncOnClick() {
//how to do distinguish?
}

You can do it like this. Using the HTML onclick does not work for right click. But adding the event listener in Javascript instead does seem to work.
document.getElementById('click').onmousedown = FuncOnClick;
function FuncOnClick(event) {
console.log(event.which);
switch (event.which) {
case 1:
alert('Left');
break;
case 3:
alert('Right');
break;
}
}
<p id="click">test</p>

You can do like this :-
$('#mouseClick').mousedown(function(event) {
switch (event.which) {
case 1:
alert('Left Mouse button pressed.');
break;
case 2:
alert('Middle Mouse button pressed.');
break;
case 3:
alert('Right Mouse button pressed.');
break;
default:
alert('You have a strange Mouse!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="mouseClick">Click here</p>

arrow control for Galleria

i'm having a problem with Galleria.
the following code:
<script type="text/javascript">
$(document).keypress(function(e)
{
switch(e.keyCode)
{
case 37: //press left arrow
$.galleria.prev();
break;
case 39: //press right arrow
$.galleria.next();
break;
}
});
</script>
won't work, it says:
$.galleria is undefined
if i use instead Galleria.prev() and Galleria.next()
then it says: Galleria.next is not a function, and the same fo prev.
i hope somebody with more experience can help me.
Thanks in advance,
Adam

galleria seems to have an attachKeyboard method, but i can't get that to work. but playing around with the code you have above, i managed to get arrow controls. try this:
<script>
//start galleria
Galleria.loadTheme('galleria.classic.js');
$('#galleria').galleria();
//obtain galleria instance - this might be the step you are missing
var gallery = Galleria.get(0);
//essentially what you had above
document.onkeyup = KeyCheck;
function KeyCheck(e) {
var KeyID = (window.event) ? event.keyCode : e.keyCode;
switch(KeyID) {
case 37: //press left arrow
gallery.prev();
break;
case 39: //press right arrow
gallery.next();
break;
}
}
</script>

Keypress not firing In Firefox

I am using a JavaScript keypress switch to fire events, and it works fine in webkit browsers, but it does not work in Firefox. Can anyone help? The code I am using is:
$(document).keydown(function(e) {
switch(e.keyCode) {
case 39:
event.preventDefault();
alert("Arrow Key");
}
break;
case 37:
event.preventDefault();
alert("Arrow Key");
}
});
The functions I am trying to fire are more complex than just an alert, but i thought i would keep it simple for the explanation.

IIRC Firefox use charCode and not keyCode.
Can you try that :
$(document).keydown(function(e) {
kCode = (e.keyCode)? e.keyCode: e.charCode;
switch(kCode) {
case 39:
event.preventDefault();
alert("Arrow Key");
}
break;
case 37:
event.preventDefault();
alert("Arrow Key");
}
});

You have an syntax-error(a wrong bracket } before break;), and an undefined object(event) inside your function.
$(document).keydown(function(e) {
switch(e.keyCode) {
case 39:
e.preventDefault();
alert("Arrow Key");
break;
case 37:
e.preventDefault();
alert("Arrow Key");
}
});
The wrong object(event) does'nt occur in MSIE, as there is always a global object called "event"