Opera extension: Imagus

, ,

Updated: December 12, 2011
The extension is intended to complement image features that (I think) is missing from Opera by default or give features that are just simply useful. The original idea was to implement as much image related features as it's possible. Read on to find out for what the extension is capable of...

By the way, this project is still under development, it doesn't contain serious bugs, but use with caution. The features aren't in final state, so their functionality may change, which means that after an update the extension maybe won't work properly or absolutely not.

Install v0.8.10 for Opera 11.60 - 12.00

Viewer

  • different sizing modes, or possibility to disable even the browser's default resizer.
    Beside the normal sizing modes there are two special:
    1. background mode (good for patterns)
    2. custom size, where you can manually set the dimensions
      Valid values (where x is a number with or without % mark):
      0 - means auto/original for both dimensions
      x[%] 0 - means auto for height and x for width (100% is the window's inner width)
      0 x[%] - means auto for width and x for height (100% is the window's inner height)
      Examples:
      20px width with reserved aspect ratio = "20",
      20 percent width, 50px height = 20% 50,
      reset to original size = 0
      This works in background mode too.
  • Key C cycles through the normal modes.
    With left click you can jump between natural size and fit to window mode.
    Holding down the left mouse button ("longpresssing") will switch between fit to width/height.
  • custom background color, it's possible to set Opera skin elements too, so for instance you can have glass transparency with -o-skin('Window Skin') as background on Windows 7 (but not recommended for slower machines).
  • custom image background color/image, accepts the CSS background property which means no limit.
  • custom image border, this one uses CSS border property, but has a little restriction on border-width, maximum allowed is 100px
  • panning, in Windows, by some reason Opera sometimes doesn't handle correctly the mouse movements, and while dragging the image it jumps randomly hither and thither. In preferences the "Panning threshold" solves this problem. If you have trouble with this, just set to a higher value. Smaller value means smoother panning, 0 means disabled.
  • horizontal scrolling, just a little convenience. If image width is bigger than its height, then you don't have to point your cursor over horizontal scrollbar and drag or wheel, instead just use the mouse wheel on the page to scroll horizontally. For example, good for wide pictures, like panoramas. But if you think it is irritating, you can disable or fine tune on preference page. Holding down the X key will invert the scrolling mode.
  • context menu, to easely access common features
  • transformations, flipping (Q - vertical, W - horizontal) and rotation ([Shift + ] E - left, [Shift + ] R - right, 9 - Custom degree)
  • zoom to selected area, holding Shift + left click + move will draw a rectangle, to move press Ctrl and move your mouse.
  • zoom with mouse wheel, a convenient method to easily zoom to a selected point with your mouse wheel.
In preferences with Image informations you can customize the string you want to see in title of the document or on the status bar, it must start with "t:" (title), "s:" (status) or "b:" (both), and after the colon you can type anything what you want mixing with the following variables:
%ow - original width
%oh - original height
%ratio - current width / current height
%w - actual width
%h - actual height
%perc - percentage of resize
%url - full URL (this is the default, it's same as an empty string)
%name - name of the image
Example for title: "t:(%perc) %name"

For start, you can try out on these pictures:
http://upload.wikimedia.org/wikipedia/commons/9/9c/Ara_ararauna_(Linnaeus_1758).jpg
http://commondatastorage.googleapis.com/static.panoramio.com/photos/original/3157623.jpg
http://commondatastorage.googleapis.com/static.panoramio.com/photos/original/41461779.jpg
http://pennprolaw.com/wp-content/themes/pennprolaw/images/page-banner-2.jpg
http://www.loredanatritto.com/wp/wp-content/uploads/2010/08/Liquid-Sun_MD1.jpg


Hover zoom

Zoom linked or thumbnail images with moving the cursor over them.
If image is larger than the view-port, by default always will be fit to the window, but you can zoom to full size with pressing Z or Enter (problem-use).
Quite customizable and there is a Sieve that allows you to add rules for specific sites (which will work on images in viewer too, with these it can open images with higher resolution).

Tools

  • easily open [background] images, favicon in new [background] tab
    On the preferences page under tools, you can read how to use or disable specific method.
  • Image search
    New engines can be added in preferences under Tools / Image search (engine per line).
    Format: "[+]Name|search engine's URL with parameters". Now there is only one parameter: %url (full image address)
    Example: TinEye|http://www.tineye.com/search?url=%url
    If you put a "+" sign before the name (e.g., "+TinEye"), then it means that engine will be used when the shortcut (default key S) is pressed. Multiple entries can be enabled, then all of them will be used.
    With Ctrl + Alt + Right click on an image (on a web-page) will start the search.

After you installed, you can try out even on this page. Just refresh it, and for example do a right longpress on the page header or try on Mr. Norris norris. Yes, if you use longpress or Alt + right click then you will get a blank image. So, try with Ctrl + right click. And here are more playgrounds:
http://www.carto.net/papers/svg/samples/svg_html.shtml (embedded SVGs)
http://www.webdesignerwall.com/tutorials/how-to-css-large-background/ (this site has a lots of background images)
http://www.tizag.com/htmlT/htmlbackground.php (background attribute)
http://www.spartanicus.utvinternet.ie/embed.htm (embed, object)
http://en.wikipedia.org/wiki/Image_map (image maps)
http://testsuites.opera.com/object-fit/visual/001.html (misc)

Gallery

When an image is opened or "hoverzoomed" then pressing G will add it to the list without any questions. Shift + G will prompt for labels. Deleting images from the list: Ctrl + Right click on the thumbnail cell or Ctrl + Click to select some and the minus button from the button-list. Shift + Right click on a cell to edit the labels.
If possible, then two links will be saved with the thumbnails. The "Source", which is the address of the page where you've seen the image, and the "Target", which is the link address (if it was a link).
Search works on the address of the image and on the labels.

Grants

At Preferences / Grants you can tell which features allowed or blocked on specific sites.
It's possible to block everything, only a feature or just some sieve rules.

Basic syntax: "!" to block or "~" to allow: "*" for everything or URL or part of the URL
Example for blocking all sites (BTW, it's recommended to disable the features instead of doing this):
!:*
Example for blocking all sites except opera.com (actually it will allow any URL that contains the "opera.com" phrase, and yes, the order matters):
!:*
~:opera.com
To block a few sites:
!:http://www.google.com
!:opera.com
!:http://www.reddit.com/r/pics/
Advanced syntax: [vw|hz][!!|~~][#rule1, rule2, rule3]:[regular expression or same as above]
vw is for viewer, hz for hover zoom, if it's missing, then for both. When you double the grant operator (!, ~), then it means that you want use regular expression in the URL. For allowing/blocking specific sieve rules you can use the "#" mark, followed by the rule names separated by commas (,) and putting all this after the grant operator.
An example for blocking only hover zoom on all Google sites, except German and French:
hz!:http://www.google.com/
hz~~:^http://www\.google\.(?:de|fr)
Allowing only the "MyOpera" and "LinkedImages" rules here on my.opera.com:
~#MyOpera,LinkedImages:my.opera.com

For the extension's icon thanks goes to http://esk6a.deviantart.com/
Known issues (I'm sure there is more, but these are a bit more common)
* rotated image has incorrect position both in viewer and in hz

image viewer:
* in some cases after moving the selection (freeZoom) on an image, the rectangle will lose its position

opening image:
* scanning images with Ctrl + right longpress is buggy

hover zoom:
* SVGs sometimes are not displayed at first time (maybe an Opera bug)
* zooming with "+ - 1, 2, 3" won't place the image to the right position, only after mouse cursor is moved

v0.8.10 - December 12
Good to know:
- Works only with Opera 11.60 or above.
- Fresh install recommended.
- The new Sieve contains total 162 rules, including some (corrected) filter from this set.

Full changelog can be found after install.

Opera extension: Source

Comments

Anonymous Friday, March 4, 2011 6:26:34 AM

Anonymous writes: With v0.7 on Opera 11.10.2018, when using C to cycle modes, once it sets background mode, it won't then cycle out of that mode. Nor will Esc work. You have to reload the image, or use the context menu. Otherwise, terrific, thanks.

Deathamns Friday, March 4, 2011 9:55:09 PM

Partially fixed... (Bug is still present if cycling starts from background mode. Next update will have a normal repair, since this was just a one-character-quick-fix.)

Anonymous Tuesday, March 8, 2011 3:14:59 AM

Anonymous writes: I never want background mode, so it's fixed for me. Thanks very much.

Anonymous Sunday, April 24, 2011 1:09:21 PM

Anonymous writes: Nice and useful extension, but it breaks drag'n'drop which is bad, really bad. I *need* to be able to drag'n'drop image on a regular basis, so this is a no-no for me.

DoTheEvolutionTheEvolutionBaby Sunday, April 24, 2011 2:09:11 PM

great extension

Deathamns Tuesday, April 26, 2011 12:07:14 AM

Originally posted by anonymous:

it breaks drag'n'drop

Unfortunately (for you), I have to break that, because of panning or any other feature, which uses mouse events. It can be a solution to make an option that will allow to drag the image along with a control key (e.g. Alt), but Opera has troubles with mousedown event (actually this breaks the drag'n'drop, even if I don't want to), so, until they fix this problem (because I believe that it is a bug, since it is handled correctly by other browsers), I cannot do anything.

metude Wednesday, May 11, 2011 5:32:01 AM

Why don't you send it to Opera extension catalog?

Deathamns Wednesday, May 11, 2011 12:36:37 PM

It's not important to be there, and there are relatives already. The next thing I will implement is a popular tool too, so this extension isn't based on unique ideas. Mainly I do it to increase my JavaScript skills.
Maybe someday I will publish it, but I won't hurry, since there is still a lot work to do with it (and not much free time).

DoTheEvolutionTheEvolutionBaby Monday, May 23, 2011 11:45:49 PM

err, in tab, where did the % of size of an image went?
I really liked it. Can you please give option for it?

Deathamns Tuesday, May 24, 2011 6:41:32 AM

I moved it to the status bar two versions earlier, because when you saved an image (with Ctrl+S), the name of it contained the percent information.
But yeah, an option for that wouldn't be bad.

DoTheEvolutionTheEvolutionBaby Tuesday, May 24, 2011 10:36:59 PM

Damn, I definitely remember that someone somewhere complained about having issues of having some informations in name of files when it was being saved, but I can't remember what it was related to. But what I do remember is that he later wrote that it was fault of some old user javascript.

Anyway, for me it always saved with the original names of files, no modifications to them, though I save images with ctrl+left mouse click; if that play some role in it...

just wanned to let you know what I know, or better yet what I don't know...

Deathamns Wednesday, May 25, 2011 10:03:33 AM

When you save the page (ie., with Ctrl+S or File/Save As), then the browser checks the title of the document and that will be the name of the saved file. This happens in case of images as well. But if you use Ctrl + left click or Right click/Save image, then it checks the name of the linked image.
The problem is that not everyone uses the last two method (sometimes I don't too), that's why I removed it.
But I made a solution for this (since it was easy to implement). Re-download the extension, and on preferences page you can find an entry called "Image informations", I've added a few samples, but you can freely customize what you want to see in title or status bar (brief instructions above).

DoTheEvolutionTheEvolutionBaby Thursday, May 26, 2011 2:13:32 AM

awesome solution, thnx

DoTheEvolutionTheEvolutionBaby Monday, May 30, 2011 4:01:58 AM

ello again,

I started to enjoy the Hover zoom. One request.
I often visit http://www.reddit.com When people post pictures there, they 99.99% of a time use imgur.com
good example is this subreddit : http://www.reddit.com/r/pics

Now whats the problem is that they sometime don't link directly to the picture, but rather to an imgur page with the picture

example:

http://imgur.com/CxtNi
vs
http://i.imgur.com/CxtNi.png

Can you make some rule that will check direct link so that both these links work with hover zoom?

Problem not only is the unknown extension(if that is a problem) but also possibility of imgur album like this one http://imgur.com/a/xYseV
But albums not working is just fine anyway, only if it screw with other functions or whole extension or something...

Also maybe adding option where user can add sites where hover zoom is not suppose to work

Deathamns Monday, May 30, 2011 1:50:42 PM

Updated (beside imgur also added Blogspot, postimg and better flickr support)...
By the way, I decided to use imgur (anonymous) API instead of resolving image URL from the picture's page, but the API has limitations. It allows only 500 fetches in an hour from the same IP address (but it should be enough), and I didn't add support for albums, because it's not clear which one from the list you want to see.

Originally posted by TheEvolutionBaby:

Also maybe adding option where user can add sites where hover zoom is not suppose to work

Not a bad suggestion, but I haven't even implemented my own ideas yet, and I'm kind of busy right now, so at least a month there won't be any new feature.

DoTheEvolutionTheEvolutionBaby Tuesday, May 31, 2011 3:05:29 PM

thanks man. rock on...

Shin RyujinEpiKnightz Sunday, June 26, 2011 10:37:30 AM

Brilliant extension, way way much better than Image Previewer and ImgTip.
Just one suggestion, can you enable an option to "curve" the corner of the image hover zoom border (the transparent thing around the enlarge image) please? (turn it from a rectangle into a rounded rectangle) That would be beautiful!
(sorry for my poor english sad )

Deathamns Sunday, June 26, 2011 10:43:43 AM

Originally posted by EpiKnightz:

... can you enable an option to "curve" the corner of the image hover zoom border ...

At preferences page under Hover zoom / Style change the Border value to:
5px solid rgba(255,255,255,0.2);border-radius:5px

DoTheEvolutionTheEvolutionBaby Sunday, June 26, 2011 10:21:16 PM

opera 11.50 RC4
left click is not cycling through first two modes.

Deathamns Sunday, June 26, 2011 11:50:17 PM

Try a clean install (I mean the extension, not Opera), maybe it will help.
If not, then need more information: which image, other enabled extensions... or anything on which I can start.

DoTheEvolutionTheEvolutionBaby Monday, June 27, 2011 10:44:34 AM

When I disabled the user javasrcipts it worked again.
This adblock script is the culprit that was in conflict..

Its funny, I always try to test only single userjavascript when something is not working properly, with extensions it didn't pop in to my mind...

Deathamns Monday, June 27, 2011 1:22:07 PM

Update...

DoTheEvolutionTheEvolutionBaby Tuesday, July 12, 2011 2:29:33 AM

It seems that small images does not always open full size on hover zoom.
At least for me.

Here you can test it on the second image, in the third row.

Here's how it looks for me, the green border I pasted at original size.

This time I disables javascripts before complaining ^^

Deathamns Tuesday, July 12, 2011 6:52:07 AM

Can't confirm. And your green outlined image's dimensions are 163x79 (if you didn't modify the size of the printscreen), which is not the same as seen on the image.
But, yeah, your popup seems smaller as it should be.

DoTheEvolutionTheEvolutionBaby Tuesday, July 12, 2011 1:09:23 PM

Upgrade to 0.8.5 fixed the issue.
Are you planing on sharing older versions as it goes? So that we can revert from newer to older if some problem occur...

Deathamns Tuesday, July 12, 2011 2:42:26 PM

Archive link at the end of the article.

Anonymous Thursday, July 14, 2011 12:16:39 AM

Eighty writes: Wasn't there an option to preload images before? It seems to be gone. Can you add this?

Deathamns Thursday, July 14, 2011 9:45:03 AM

It's still there, just renamed it, because it was a little misleading. In fact, it doesn't load images after you open a page, it's just starts the loading when your cursor goes over a link.

Rich Tibbettrichtr Thursday, July 14, 2011 11:31:09 AM

Do you plan to submit this to addons.opera.com. Dunno about everyone else but I'm wary of installing without this going through moderation.

abbrbbq Thursday, July 14, 2011 11:35:13 AM

This looks great, but when I click the "save" button, my preferences are reset. Any idea what's going on here?

Anonymous Thursday, July 14, 2011 12:41:51 PM

Anonymous writes: One of the best Opera extensions so far. Great work.

Deathamns Thursday, July 14, 2011 1:28:59 PM

Originally posted by richtr:

Do you plan to submit this to addons.opera.com...


Not in the near future, still didn't implemented the features that I imagined, and there are many issues that I have to solve.
But there is nothing to worry about. If you don't believe me, check the source code of the extension or ask someone who knows how to...

Originally posted by abbrbbq:

This looks great, but when I click the "save" button, my preferences are reset. Any idea what's going on here?


You can try this:
Open Opera's error console (Ctrl+Shift+O), clear it if already has entries, go to the preferences page and press Save. If the console gives some errors, then send them to me (click on a message, Ctrl+A to select all, and Ctrl+C to copy).

Anonymous Thursday, July 14, 2011 2:47:09 PM

Anonymous writes: Rotation (E - left, R - right) and fit to width (key: 3) are broken!

Xombiemubaidr Thursday, July 14, 2011 2:53:39 PM

Very good looking extension nut

1-Cannot save preferences here too. sad thats why i cannot enable hover zoom cry
2-Add option to disable Image resizing (use default opera's behaviour) since i would like to use it mainly for hover zoom. wink

Anonymous Thursday, July 14, 2011 3:00:22 PM

writes: Found some bugs (if you already know about them, then sorry): 1) The settings in the Preference window always load as default instead of saved ones when opening Preferences. 2) Image position - middle ceter -> should be center I guess Also, opening images with this setting doesn't make them appear in the center, instead they're a litte to the left (My default mode: Autoscale, widescreen 1600x900). Clicking on them makes them centered afterward. 3) Show captions - no captions -> Hover zoom stops working. Otherwise I'm really happy with this extension. I tweaked the settings a little and now I can't get enough of hover zoom.

Deathamns Thursday, July 14, 2011 6:10:22 PM

Originally posted by anonymous:

Anonymous writes:
Rotation (E - left, R - right) and fit to width (key: 3) are broken!

Rotation is still experimental feature...

Originally posted by mubaidr:

Very good looking extension nut

1-Cannot save preferences here too. sad thats why i cannot enable hover zoom cry
2-Add option to disable Image resizing (use default opera's behaviour) since i would like to use it mainly for hover zoom. wink

1- It's enabled by default. Can you do me the same I asked at the end of this comment?
2- There is already option for that. "Default mode" under Image resizing

Originally posted by anonymous:

writes:
1) The settings in the Preference window always load as default instead of saved ones when opening Preferences.

2) Image position - middle ceter -> should be center I guess
Also, opening images with this setting doesn't make them appear in the center, instead they're a litte to the left (My default mode: Autoscale, widescreen 1600x900). Clicking on them makes them centered afterward.

3) Show captions - no captions -> Hover zoom stops working.

1) Maybe fixed.
2) Typo fixed. I know about wrong centering, but don't know the source of the problem yet (but at the moment it's working for me).
3) Fixed.
Re-download and try.

Xombiemubaidr Thursday, July 14, 2011 7:36:47 PM

Originally posted by Deathamns:

1- It's enabled by default. Can you do me the same I asked at the end of this comment?



I did what u said but nothing happens, no errors, but hover zoom does not work. sad I even tried setting to,

Enabled when holding nothing. but it wont work and nor it save changes sad

Deathamns Friday, July 15, 2011 8:29:49 AM

Try with clean Opera install (or better with a clean portable version to leave your main setup), and test with that. I don't have better idea, since it's working for me without any serious problem...
And you have to set "Disable when holding nothing" on preferences page to enable hover zoom (opposite logic).

Anonymous Friday, July 15, 2011 8:47:46 AM

Dan writes: not saving and cant use shortcuts.

Anonymous Friday, July 15, 2011 9:02:28 AM

p_F writes: great extension - thx for your work

Deathamns Friday, July 15, 2011 9:11:26 AM

Originally posted by anonymous:

Dan writes:
not saving and cant use shortcuts.

Barely enough information, please be more specific.

Florin IacobMastema Friday, July 15, 2011 9:31:05 AM

Having issues on reddit. If I open an article with an image (eg: an imgur post), I can't click on the top bar to take me to the comments.

Anonymous Friday, July 15, 2011 10:15:14 AM

Sven D writes: Nice Extension, it's very usefull (espacially for web developers like me i think). But how about adding rotate functionality? All you need is: " -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); " Works for all Webkit, Firefox, Opera and IE (i think > 6) browsers. Would be awesome!

Anonymous Friday, July 15, 2011 10:16:54 AM

Sven D writes: Oh lol i just saw you already implemented it. Hm maybe the code helps you with the issues that were already mentioned!

z@h3kZAHEK Friday, July 15, 2011 10:20:20 AM

up

Emoryy Friday, July 15, 2011 10:35:37 AM

When opening a single image, the position is incorrect.
Option is set to middle-center by default.
But:
When an image is small, it is displayed top-center.
When big, on the left.
After clicking on it to zoom, and again to zoom out, image displayed in the right position.

+Could we have animation effect while zooming too?

Anonymous Friday, July 15, 2011 10:42:58 AM

Sven D writes: @ Emoryy Do you have other Extensions and / or a different opera skin? Because i haven't this problem. I'm using the default skin and just some extensions, but there is no error like this.

Deathamns Friday, July 15, 2011 11:29:01 AM

Originally posted by Mastema:

Having issues on reddit. If I open an article with an image (eg: an imgur post), I can't click on the top bar to take me to the comments.

Can you give me a screenshot and a direct link, because I didn't find any "unclickable comments".

Originally posted by anonymous:

Sven D writes:
Oh lol i just saw you already implemented it. Hm maybe the code helps you with the issues that were already mentioned!

I'm already using CSS transformations, but the rotation issue isn't my main priority.

Originally posted by Emoryy:

When opening a single image, the position is incorrect.
...
+Could we have animation effect while zooming too?

I know what is the problem, but I haven't found a good solution yet.
About the animation... maybe, but not so soon.

Anonymous Friday, July 15, 2011 12:12:43 PM

DiD0 writes: That extension is so cool! But now the real challenge: can you make transparent background for PNG images?

Deathamns Friday, July 15, 2011 12:42:24 PM

You can set the background color for an image that has transparency. Check out the preferences page.

How to use Quote function:

  1. Select some text
  2. Click on the Quote link

Write a comment

Comment
(BBcode and HTML is turned off for anonymous user comments.)

If you can't read the words, press the small reload icon.


Smilies