Enhanced image sizer

Enhance displaying of images

This script is inspired by Arve Bersvendsen's Autosizer.

As with Autosizer, you can fit image to view-port width/height or view image as is. But there are few more or less useful features. Those are:

  • While changing between preferred mode and actual size (default: double click) clicked part of image will be centred if image is larger than view-port.
  • If image is larger than view-port you can pan it (default: click and drag)
  • You can select part of an image you wish to zoom and it will be stretched to view-port size (default: hold Shift then click and drag).

When script is active you can press H key or click on question mark in information panel to view usage information.

Beside below stated, this script is also tested on versions 9.01, 9.21 and 9.27.

I hope it will be useful to you as is for me.
Cheers!

Changelog

03-01-2011

I don't know when I'll work on this script again so this is an update I made while ago but didn't publish 'cause it's not complete.

Syndicate content

Tested with Opera version(s): 
10.10
10.50
10.6x
11
Your rating: None Average: 4.7 (23 votes)

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

great

how can i change this ?

Best Fit: (1575×1046)×61% = 962×639

to this

Best Fit (61%)

i found it but now it's Best

i found it

but now it's Best Fit: 61%

i can't find where you write the colon after mode name

sorry forget this i found

sorry forget this i found it

:|

(No subject)

mode 0 double click

when mode is set to 0 (actual size) double click don't resize the image to best fit.

Re: mode 0 double click

Double click behaviour is to change from preferred mode to Actual Size and vice versa.

rotating image mode

Can you add to this .Js rotating image mode? it would be very useful. Thanks.

Re: rotating image mode

Clarify, please.

Clarification

Add to menu options: rotate left, rotate right and  rotate 180° and if possible flip vertically, flip horizontally.

I don't know javascript at all, but I found something that could be useful for you: http://www.aurigma.com/docs/iu/RotatingResizingandOptimizingImages.htm

anonim

I want to have ability to change position from  horizontally to vertically. Example.  

Re: anonim

This can easily be done with CSS3 2D Transform. But, it's yet working draft and only experimentally supported by upcoming version of Opera. So, I don't plan to implement it soon.

Doesn't work?

I installed JS correctly in 10.50 3275, but it doesn't work. What gives?

Never mind...the JS file was

Never mind...the JS file was empty! Strange..

Good work!

Hi there, thanks for the work, well done!

But... :) i cant pan around in large Images.
(e.g. http://peach.blender.org/wp-content/uploads/big_big_buck_bunny.jpg)
Zoom to 100% and try to pan even half of the screen.
It pans a crazy route and ends quite near the start.

keep it up 

Re: Good work!

Are you using Windows? I notice that behaviour only on Windows. It happens very rarely and I don't know what causes it. Reloading page usually solves this problem.

Great script, just a couple of questions.

How could I modify the script to:

1.  Make the default image view full size, best fit on double click (basically reversing the current order.)

2.  Make the default background color black.

It's probably simple, but my JS skills are almost non-existent.

Re: Great script, just a couple of questions.

Script updated.

Wow.

So the main link posted at the top has those changes now?  Thanks!

I much prefer single click to

I much prefer single click to alter the display mode (i.e. I changed line 461 to li.addEventListener("click", function () {)

I basically liked the behavior of my trusty old Autosizer from http://userjs.org/scripts/browser/enhancements/autosizer except it stopped working in 10.5. :(

Intelligent alien life does exist, otherwise they would have contacted us.

Re: I much prefer single click to

I wanted the option to pan image and it was simpler to implement this way.

Panning still works with this edit :)

So I advocate sticking it in the next version. :P

Intelligent alien life does exist, otherwise they would have contacted us.

Nice update!

A request that came up on the forums was to implement zooming the image with scrolling (i.e. without having to go to normal size and then using ctrl+scroll). This isn't of any interest to me personally, but I figured I'd let you know.

Intelligent alien life does exist, otherwise they would have contacted us.

That's a really nice script.

That's a really nice script. Autosizer doesn't work anymore, so I checked this one out and I definitely prefer this one. Thanks for sharing.

One thing howerver, conflicts a little with my browsing behavior. I used to save opened Images by dragging them into the Opera Transfer Panel. That doesn't work in your script since you drag around inside the image. Can you include an option to enable this behavior only while pressing a modifier key? Oh and I agree, a rotating function would be nice as well.

Bug or feature?

If I open small images (smaller than screen size) they sometimes appear at top-center, not center-center which is default opera behavior. And how can I disable "Best Fit: (1575×1046)×61% = 962×639" bar?

explanation

Some explanations - first of all - I can't register, so I have to write as guest. And the main thing. I didn't mean to hide infopanel completely, but make them invisible until hovered. I thing it could be realized by CSS. And pictures still sometimes appear at top-center, sometimes center-center, but I can't notice what for it depend on. 

If you have trouble

If you have trouble registering please contact me though the contact page with a valid e-mail address.

regards,
Zotlan

To expand on the hover thing,

To expand on the hover thing, a very easy way to accomplish this would be to use opacity:0 as the normal style and opacity:1 as the :hover style. Work it into a setting and everyone'll be happy. ;P

Intelligent alien life does exist, otherwise they would have contacted us.

Wow, works greate.

It is great piece of code. I have no idea that such thing (enhancing jpg with script) is possible with userscript! Clever. Even double clicking works perfectly. Also rotation is super.

Thanks.

Will you consider adding something like this (as lets name it "Manual mode"): http://www.ernestdelgado.com/public-tests/canvasphoto/demo/canvas.html  Of course for single image.

PS. I have some problem with interaction beetwen this script and "Zoom text only", but the bug is in their script. :)

animated gif

Currently your script shows animated gifs as still frames. Is there a way to show them animated?

Also, Great script, I like it.

Re: animated gif

Not possible. Please check that F12->Enable Animated Images is ticked.

thanks, that was it. don't

thanks, that was it. don't know why it wasn't ticked anymore. Anyway, thanks for implementing  the rotate and image properties functions. great work.

GIF works for me. All

GIF works for me. All functions (rotating, changing size, etc) works correctly, even when animation is in progress. Opera 10.50 have problame that it display only first frame and starts animation only after downloading whole gif file (no streaming). But it works. You could check if you maybe have animations disabled. F12->Animations

pressing F11

Opera 10.51 Windows 7

Pressing F11 (enter fullscreen) rotates images - maybe an error

Yes.

Confirming, F11 (fullscreen switch) rotates images. Linux i386 10.51 snapshot. Discovered yesterday.

Re: pressing F11

It will be fixed soon. If you can't wait change:

d.addEventListener("keyup", function (event) {
	switch (event.keyCode) {

(lines 708 and 709) to:

d.addEventListener("keypress", function (event) {
	switch (event.which) {

thx martin

thx

martin

Update

Please wait for moderator to approve this update and submit any bug/issue/suggestion/wish.

thank you very much :)

thx for adding rotate mode. Many thanks!!!! Greetings from Poland :)

style.textContent += "html {

style.textContent += "html { background-color: " + pref.bgc + "; }"

is better than

style.textContent += "body { background-color: " + pref.bgc + "; }"

This fix white area outside body tag.

Very usefull script

Thank you very much for this script !! Such a good work. I will use it all the time.

Here is a contribution. "Actual size" and "Best Fit" mode look the same to me. So the next modification is to change the behavior of "Best Fit" mode. It will always maximize all images in the viewport.

Lines 658 and 659. Below comment: // best fit mode

img.style.maxWidth = "100%";
img.style.maxHeight = "100%";

Become

if (w.innerWidth / w.innerHeight > img.width / img.height)
	img.style.height = "100%";
else
	img.style.width = "100%";

Jean-François

Rotate mode does not work in opera 10.60

Rotate mode does not work in opera 10.60. Can you fix it?

New tool please

A tool for zoom in zoom out would be nice. The code below can be added. It allows mouse right click for zoom in.

d.addEventListener("mousedown", function (event) {
    if (event.button == 2) {
        mouseDown = true;
        // set current mouse coordinates
        mouseX = event.pageX;
        mouseY = event.pageY;
        zoom = true;
        image.mask.create(mouseY, mouseX);
    }
},false);

   

rotate options doesn't work for opera 10.61

Rotate options fixed for 10.62

Hello, i fixed rotate options in opera 10.62

Source:
http://pastebay.com/106689

does not work for 10.63

for me only?

tray this code it works with

tray this code it works with 10.63

works again on 11

could somebody port it to extension. this javascript is just great, better than existing extensions. porting it to extension would increase opera popularity.

does not work in Opera 11.10.2005

update it please

size
 
size

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Post new comment

By submitting this form, you accept the Mollom privacy policy.