Manage your expenses via Email, SMS, iPhone, Twitter, Voice (Call and say your expense), IM (Yahoo, AIM, MSN), or Web.
ScrollMonkey: Google Reader Style J-K Hotkeys For Image Paging And Centering
Comments(15)
I’ve long wished for Google Reader style hotkeys (hitting “j” to move to the next item, “k” to go to the previous) to be available in more places. In particular, pages with many images are screaming for it – it’s just silly to keep messing with the scroll bar to get each image to line up properly in the viewable portion of the browser. If you don’t know what I mean go to any of these pages with lots of images and try to view each image. If you’re not frustrated with the scroll bar by the 3rd image you’re far more patient than I.
I finally found a few minutes to hack at it, and sure enough, it was quite easy to do with GreaseMonkey and jQuery.
The script does a very simple thing – it brings the next image to the top of the browser window so you can see it. You hit “j” to see the next image and “k” to go back to the previous.
Install GreaseMonkey and then install ScrollMonkey by clicking on it.
Once installed, go to any of the above pages with images, click on the page (to ensure the page is in focus), and hit the “j” key a couple of times until the first picture is at the top of the browser window. Now hit “j” again to go to the next image and “k” to go back.
The script is very simple and brain dead – I’ve made no attempt to make it intelligent. In particular, it’s active on every page and it downloads jQuery, which is probably more overhead than you want to have. In my case I typically have GreaseMonkey turned off and only turn it on when I need it, so it’s not much of a problem. It also looks at all images instead of attempting to find the large images of interest.
It would also be smart to generalize it to deal with anything – paragraphs, headings, etc – instead of just images.
And it’d be probably be nice to have it turn on via a hotkey instead of always being on, and it probably will interfere with any forms you’ll try to fill out.
But practically speaking none of these are problems I run into, so I’ll leave them for now and fix them if there’s any demand for it.
Give it a try and let me know what you think.
Here’s the code in its entirety, for those interested:
// Add jQuery
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);
// Check if jQuery's loaded
function GM_wait() {
if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); }
else { $ = unsafeWindow.jQuery; run(); }
}
GM_wait();
function run() {
var images = $('img'),
idx = -1,
nimages = images.length;
$(document).keypress(function (e) {
// j == 106 ; k == 107
if (e.which != 106 && e.which != 107) { return; }
if (e.which == 106 && idx < nimages-1) { idx++; }
if (e.which == 107 && idx > 0) { idx--; }
var top = $(images[idx]).offset().top;
unsafeWindow.scrollTo(0, top);
} );
}
[...] ScrollMonkey: Google Reader Style J-K Hotkeys For Image Paging And Centering [...]
on this topic, have you used piclens add-on for ff3/IE7?
I haven’t used piclens. I’m generally not excited about 3d browsing based on past experiences, but it may be worth a try.
It would indeed be fantastic if this kind of script could be activated for paragraphs. Unfortunately, I have no knowledge of coding at all. Do you have any intention of exploring that yourself, or do you leave it to interested parties? Thanks!
gee guys with Opera if you’re on a page with a million thumbnails all you have to do is click on the first one and then click the spacebar to roar through them all-works for scrolling down the page and will load all images in order
FFFFound! (ffffound.com/) also uses this navigation technique beautifully. Great work!
[...] Tony Darugar wanted an easy way to scroll through a long page with large images on it. Though the ScrollMonkey Greasemonkey user script can do it, to avoid installing an add-on he put together a ReaderScroll bookmarklet. Drag and drop [...]
There is something like this for paragraphs. It’s an FF extension (not a greasemonkey script) called Paragrasp. It’s not perfect, but it partially does the trick.
I’ve modified your script slightly for my own use. Since I only use it for boston.com’s Big Picture and sacbee’s The Frame, I made it only stop when the image height is greater than 400 pixels high.
Jeremy, checking the size is an excellent idea, I’ll include that in a future version.
Cool! I realized today that 400 is a bit too ambitious and it works better at 350 or so.
Hi,
I like your script very much but I have some problems if I surf to one of this sites (with your script activatet):
- http://www.eplus.de (I can´t log me in)
JS Error: “d.Style is undefined”
- http://www.studivz.net (I can´t use some functions)
JS Error: “$.cookie is not a function”
Regards
Deschi
Deschi, scrollmonkey is likely to interfere with other sites as it’s not careful about its event handling and loading of jquery. Two solutions:
- You can specify which sites you want it to run on by removing the
// @include *
line and instead listing each site, ala:
// @include http://www.boston.com/bigpicture/*
// @include http://www.someothersite.com/something/*
- Or you can keep the @include * and instead specify which sites it should not run on:
// @exclude http://www.eplus.de/*
// @exclude http://www.studivz.net/*
Ok, thanks.
I think the “@include” is the best for me because I don´t know which other sites have problems with the script
Regards
Deschi
Check out this GitHub project. It does all this and some more! Very nice …
Thanks for this.
FYI – I tweaked mine to jump between headings on the page.
cheers, Oliver