(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.
Using "J" and "K" to jump to next-image
-
- PlutoniumLounger
- Posts: 15642
- Joined: 24 Jan 2010, 23:23
- Location: brings.slot.perky
Using "J" and "K" to jump to next-image
He who plants a seed, plants life.
-
- Administrator
- Posts: 7215
- Joined: 15 Jan 2010, 22:52
- Location: Middle of England
Re: Using "J" and "K" to jump to next-image
I think it may be in this script:
"k" is ASCII 107, for example...
(By the way, loved the pun the other day... )
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>
(By the way, loved the pun the other day... )
Leif
-
- 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
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
<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
I’ll be more enthusiastic about encouraging thinking outside the box when there’s evidence of any thinking going on inside it
-
- PlutoniumLounger
- Posts: 15642
- Joined: 24 Jan 2010, 23:23
- Location: brings.slot.perky
Re: Using "J" and "K" to jump to next-image
TYJIDH(1)jezza wrote:<a href="http://www.magicforest.co.uk" accesskey="Z">Web Page</a>... HTH
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
He who plants a seed, plants life.
-
- PlutoniumLounger
- Posts: 15642
- Joined: 24 Jan 2010, 23:23
- Location: brings.slot.perky
Re: Using "J" and "K" to jump to next-image
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.Leif wrote:I think it may be in this script:
I like Jezza's idea of an extra variable in a tag, because I can generate that automatically with my web compiler.
He who plants a seed, plants life.
-
- 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
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>
<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
I’ll be more enthusiastic about encouraging thinking outside the box when there’s evidence of any thinking going on inside it
-
- PlutoniumLounger
- Posts: 15642
- Joined: 24 Jan 2010, 23:23
- Location: brings.slot.perky
Re: Using "J" and "K" to jump to next-image
Cool Dude!jezza wrote:Chris you can use the anchors which utilise the a tag like so
This Updated page functions with Shift-Alt-X and Shift-Alt-W.
I'm going to play around a bit now ...
Thanks Jezza! :youdaone:
He who plants a seed, plants life.
-
- 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
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
I’ll be more enthusiastic about encouraging thinking outside the box when there’s evidence of any thinking going on inside it
-
- PlutoniumLounger
- Posts: 15642
- Joined: 24 Jan 2010, 23:23
- Location: brings.slot.perky
Re: Using "J" and "K" to jump to next-image
Jezza, thanks for the heads-up.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
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).
He who plants a seed, plants life.