Using "J" and "K" to jump to next-image

User avatar
ChrisGreaves
PlutoniumLounger
Posts: 15498
Joined: 24 Jan 2010, 23:23
Location: brings.slot.perky

Using "J" and "K" to jump to next-image

Post by ChrisGreaves »

(this is not a mission-critical post; I'm wondering whether a simple change can make a lot of difference to my web pages)

The Boston Globe's Big Picture is a photo-essay. One can use the "J" and "K" keys to jump forwards and backwards to the adjacent image.
I imagine this technique is different from the "jump to bookmark" described in http://www.hypergurl.com/anchors.html.

With my limited HTML knowledge I've examined the Boston Globe's source, but can't see how they implement the J/K convention.

I'd dearly love to know how, especially if it is a generic tag or wotnot that can be applied to each image I produce, without needing anything specific to the image, such as a unique bookmark identifier.

I would then generate the standard tag and make all my photo-essays navigable one-image-at-a-time.
An expensive day out: Wallet and Grimace

User avatar
Leif
Administrator
Posts: 7193
Joined: 15 Jan 2010, 22:52
Location: Middle of England

Re: Using "J" and "K" to jump to next-image

Post by Leif »

I think it may be in this script:

Code: Select all

<script>
	var currImg = -2;
	var imgArr;
	var isLoaded = 0;
	function getElementsByClassName(node, classname){
	    var a = [];
	    var re = new RegExp('\\b' + classname + '\\b');
	    var els = node.getElementsByTagName("*");
	    for(var i=0,j=els.length; i<j; i++)
	        if(re.test(els[i].className))a.push(els[i]);
	    return a;
	}
	var hideMsg="<br/><br/><br/>Warning:<br/>This image contains graphic<br/>or objectionable content<br/><br/>click here to view it."
	var nHideMsg="<br/><br/><br/>This image may depict nudity or other possibly objectionable content<br/><br/>click here to view it."
	function bpload(){
		var getHid = getElementsByClassName(document.body,"imghide");
		for(i=0;i<getHid.length;i++){
			getHid[i].innerHTML=hideMsg
		}
		getHid = getElementsByClassName(document.body,"imghideN");
		for(i=0;i<getHid.length;i++){
			getHid[i].innerHTML=nHideMsg
		}
		imgArr = getElementsByClassName(document.body,"bpImage")
		isLoaded = 1;
		document.getElementById("textField").onkeypress = function(e){
			isLoaded = 0;
		}
	}

	document.onkeypress = function(e){
		if(!e) e=window.event;
		key = e.keyCode ? e.keyCode : e.which;
		if((key==107)&&(isLoaded)){
			if(currImg>0){ currImg--; window.scrollTo(0,imgArr[currImg].offsetTop+174); }
			else{ if(currImg==0){ currImg--; window.scrollTo(0,305) }else{ if(currImg<0){ window.scrollTo(0,305); } } }
			e.cancelBubble = true;
			if (e.stopPropagation) e.stopPropagation();
		}
		if((key==106)&&(isLoaded)){
			if(currImg<imgArr.length-1){ currImg++; if(currImg==-1){ window.scrollTo(0,305) }else{ window.scrollTo(0,imgArr[currImg].offsetTop+174); } }
			else{ if(currImg==imgArr.length-1){ window.scrollTo(0,imgArr[imgArr.length-1].offsetTop+174) } }
			e.cancelBubble = true;
			if (e.stopPropagation) e.stopPropagation();
		}
	}
</script>
"k" is ASCII 107, for example...

(By the way, loved the pun the other day... :grin: )
Leif

User avatar
Jezza
5StarLounger
Posts: 847
Joined: 24 Jan 2010, 06:35
Location: A Magic Forest in Deepest, Darkest, Kent

Re: Using "J" and "K" to jump to next-image

Post by Jezza »

By far the simplest method to create keyboard shortcuts to links is to use the AccessKey attribute in the a tag like so:

<a href="http://www.magicforest.co.uk" accesskey="Z">Web Page</a>

In IE you have to press Alt + Z and then Enter

In FFx you press Shift + Alt + Z

Obviously you can use any single character on the keyboard

HTH
Jerry
I’ll be more enthusiastic about encouraging thinking outside the box when there’s evidence of any thinking going on inside it

User avatar
ChrisGreaves
PlutoniumLounger
Posts: 15498
Joined: 24 Jan 2010, 23:23
Location: brings.slot.perky

Re: Using "J" and "K" to jump to next-image

Post by ChrisGreaves »

jezza wrote:<a href="http://www.magicforest.co.uk" accesskey="Z">Web Page</a>... HTH
TYJIDH(1)

This Page is simple demonstration of it, and the FFX Shift-Alt-Z does indeed jump amongst the links.
Now, for bonus points, do you know of an equally simple solution that would work for images?

http://www.cs.tut.fi/~jkorpela/forms/accesskey.html tells me that "The following elements support the ACCESSKEY attribute: A, AREA, BUTTON, INPUT, LABEL, and LEGEND, and TEXTAREA.", but I don't see IMAGES in that list.

(1)Thank You Jezza It Does Help
An expensive day out: Wallet and Grimace

User avatar
ChrisGreaves
PlutoniumLounger
Posts: 15498
Joined: 24 Jan 2010, 23:23
Location: brings.slot.perky

Re: Using "J" and "K" to jump to next-image

Post by ChrisGreaves »

Leif wrote:I think it may be in this script:
Thanks, Leif. I'm going to strip Jezza's brain of simple ideas first, but if he fails to excite me, I'll return here and try the script.
I like Jezza's idea of an extra variable in a tag, because I can generate that automatically with my web compiler.
An expensive day out: Wallet and Grimace

User avatar
Jezza
5StarLounger
Posts: 847
Joined: 24 Jan 2010, 06:35
Location: A Magic Forest in Deepest, Darkest, Kent

Re: Using "J" and "K" to jump to next-image

Post by Jezza »

Chris you can use the anchors which utilise the a tag like so
<a href="#B" accesskey="Y"><img src="jezza.jpg" width="100" height="100"></a><a name="A"></a>
<a href="#A" accesskey="Z"><img src="image2.jpg" width="100" height="100"></a><a name="B"></a>
Last edited by Jezza on 02 Jul 2010, 14:38, edited 1 time in total.
Jerry
I’ll be more enthusiastic about encouraging thinking outside the box when there’s evidence of any thinking going on inside it

User avatar
ChrisGreaves
PlutoniumLounger
Posts: 15498
Joined: 24 Jan 2010, 23:23
Location: brings.slot.perky

Re: Using "J" and "K" to jump to next-image

Post by ChrisGreaves »

jezza wrote:Chris you can use the anchors which utilise the a tag like so
Cool Dude!
This Updated page functions with Shift-Alt-X and Shift-Alt-W.

I'm going to play around a bit now ...
Thanks Jezza! :youdaone:
An expensive day out: Wallet and Grimace

User avatar
Jezza
5StarLounger
Posts: 847
Joined: 24 Jan 2010, 06:35
Location: A Magic Forest in Deepest, Darkest, Kent

Re: Using "J" and "K" to jump to next-image

Post by Jezza »

Be mindful that I have changed the code above as I missed a couple of </a> tags off which may cause problems later
Jerry
I’ll be more enthusiastic about encouraging thinking outside the box when there’s evidence of any thinking going on inside it

User avatar
ChrisGreaves
PlutoniumLounger
Posts: 15498
Joined: 24 Jan 2010, 23:23
Location: brings.slot.perky

Re: Using "J" and "K" to jump to next-image

Post by ChrisGreaves »

jezza wrote:Be mindful that I have changed the code above as I missed a couple of </a> tags off which may cause problems later
Jezza, thanks for the heads-up.
I now have a 4-key version here
It depends on the letters J, K, L and M.
I am going to experiment some more. A page will have more than 26 phtos, so I'm looking for a way to have a consistent mechanism (like the Boston Globe - a simple "J" with no auxiliary keys).
An expensive day out: Wallet and Grimace