So you want to automatically zoom and fit to window the small images ? i.e.: small like this https://support.mozilla.org/media/uploads/avatars/2011-03-23-00-15-15-cc9514.jpg ??

Jan. wrote:

So you want to automatically zoom and fit to window the small images ? 

Yes.

Jan. wrote:

i.e.: small like this

Anything smaller than window size. Resizing avatars or emoticons isn't particularly useful, but when your resolution is high enough, there's a myriad of other images that are simply too small to make out.

The Image Autosizer extension for Opera has the functionality I'm looking for, but I couldn't find an equivalent for Firefox.

I wrote a user script (to be used with Scriptish).

• It automatically zooms in small images.
• Left-clicking the image returns it back to its original size.
• Left-clicking again will zoom in again (useful for example if you maximize the window to get a better view after the image has already been zoomed in automatically).
• By default, this script doesn't run on URLs without an image file extension (like this comic strip). Such URLs can be added manually in the Scriptish preferences for the script.

// ==UserScript==
// @id             dc989f0a-f9e6-4507-ba5f-a0730a614553@http://forums.mozillazine.org/memberlist.php?mode=viewprofile&u=261941
// @name           Auto zoom lone images
// @version        2.5
// @namespace      http://forums.mozillazine.org/memberlist.php?mode=viewprofile&u=261941
// @author         Gingerbread Man
// @description    Automatically zoom small standalone images
// @include        http://*.jpg
// @include        https://*.jpg
// @include        http://*.gif
// @include        https://*.gif
// @include        http://*.png
// @include        https://*.png
// @run-at         window-load
// ==/UserScript==

var img = document.images[0];
var iw = img.width;
var ih = img.height;
var ir = iw / ih;

function togglezoom() {
	if (img.width>iw||img.height>ih) {
		img.width = iw;
		img.height = ih;
		img.setAttribute("style","cursor:-moz-zoom-in");
	}
	else zoomin();
}

function zoomin() {
	var ww = window.innerWidth;
	var wh = window.innerHeight;

	if (iw<ww&&ih<wh) {
		img.addEventListener("click", togglezoom, false);
		var zohw = wh * ir;

		if (zohw<=ww) {
			img.height = wh;
			img.width = img.height * ir;
			img.setAttribute("style","cursor:-moz-zoom-out");
		}

		else {
			img.width = ww;
			img.height = img.width / ir;
			img.setAttribute("style","cursor:-moz-zoom-out");
		}

	}

}

zoomin();

//.user.js

I guess since I haven't received any suggestions, I'll mark this as the solution.

Thanks for posting the script Gingerbread_Man

Edit: noticed that you've fixed the script, so this no longer applies

I noticed that you forgot to check for square images (iw==ih)

• https://addons.cdn.mozilla.net/img/uploads/userpics/0/105/105689.png

Wouldn't this be better (do you need iw==ww and ih==wh)?

function zoomin() {

var ww = window.innerWidth;
var wh = window.innerHeight;

if (iw>=ih&&iw<=ww) {
	img.width = ww;
	img.height = img.width / ir;
	img.setAttribute("style","cursor:-moz-zoom-out");
}

else if (iw<=ih&&ih<=wh) {
	img.height = wh;
	img.width = img.height * ir;
	img.setAttribute("style","cursor:-moz-zoom-out");
}

}

Here is a compressed version that can be used as a bookmarklet if you want to use it in a profile that doesn't have the extension or for local files because Scriptish doesn't seem to support the file:/// protocol.

javascript:(function(){var img=document.images[0],iw=img.width,ih=img.height,ir=iw/ih;function zoomin(){var ww=window.innerWidth,wh=window.innerHeight;if(iw<ww&&ih<wh){var zohw=wh*ir;if(zohw<=ww){img.height=wh;img.width=img.height*ir;img.setAttribute("style","cursor:-moz-zoom-out");}else{img.width=ww;img.height=img.width/ir;img.setAttribute("style","cursor:-moz-zoom-out");}}}zoomin();function togglezoom(){if(img.width>iw||img.height>ih){img.width=iw;img.height=ih;img.setAttribute("style","cursor:-moz-zoom-in");}else zoomin();}img.addEventListener("click",togglezoom,false);})()

Scriptish supports RegExp, so you can use something like this:

// @include        /^(https?:[/]{2}|file:[/]{3}).+[.](jpg|gif|png|bmp)/i

Thank you for the reply.

cor-el wrote:

Scriptish supports RegExp, so you can use something like this: 

I didn't think there was anything to be gained from RegExp in this case. I think I still prefer separate includes for the sake of readability.

cor-el wrote:

Scriptish doesn't seem to support the file:/// protocol. 

Not by default, but extensions.scriptish.enabledSchemes.file can be toggled to true in about:config.

I updated the script again because it was breaking the zoom function for images larger than the window (which it's supposed to leave alone). It should be okay now. I've tested it with

• Landscape images, e.g. Vulpes velox
• Portrait images, e.g. The Fox and the Grapes
• Square images, e.g. Vulpes zerda
• And images larger than the window (which should be unaffected), e.g. Vulpes vulpes

I'd appreciate it if you could give it another look and point out if there are any problems. Thanks again.

Yes. This looks a lot better. I had noticed other issues with the previous script that caused scroll bars to appear.

I noticed that LouCypher posted a link ([*]) to a script that is meant to run under the same conditions that test if document.contentType starts with 'image/" to avoid testing for a scheme and file extension.

• http://userscripts.org/scripts/show/153158
• if (!/^image\//.test(document.contentType)) return;