This document will help you use ImageTweak correctly and efficiently.
For suggestion, corrections and informations please head over to the support thread on MozillaZine.org.
Status of this document
This guide is based on ImageTweak version 0.19. If you are using any other version you may find discrepancies between the contents of this guide and the behaviour or appearence of your version.
Introduction
ImageTweak is a very narrowly targeted addon. As such, you will not see it active anywhere except when the current tab or window is displaying an image not embedded within a webpage (more precisely it will activate only when the URL of the currently active document points to a resource having a MIME-type that Firefox renders by instantiating an ImageDocument).
When ImageTweak is active, it transforms the default view of the "direct" image (white background, image in the top-left corner, at most two zoom levels) setting a custom background color (by default a dark gray), centering the image and making it zoomable.
Many aspects of ImageTweak (such as its behaviour, input methods, etc.) can be configured from the Options dialog reachable from the Add-ons window (Tools > Add-ons). Depending on how the options are set, ImageTweak will behave differently: as such a complete discussion is not feasible, and we will only pinpoint the most common cases.
Basic usage
When an image is displayed, you can:
- Zoom in or out the image by holding down ctrl and scrolling the mousewheel, or using the +/- keys.
- Move the image by dragging it with the mouse (left-click), or using the arrow keys. The mouse wheel also performs vertical scrolling.
- Switch zoom mode using the mouse (double left-click), using the space bar or the keys 1 (full view), 2 (fill view), 3 (unscaled view), 4 (free view).
- Perform drag-and-drop of the image as usual by dragging the image outside the browser window.
- Rotate the displayed image using ctrl+> and ctrl+<.
When a webpage is displayed, you can (if the corresponding options has been enabled in the Options window):
- If you use ctrl + right-click when the pointer is over an image, it will be opened as a "direct" image in the current tab.
- If you use ctrl + alt + right-click when the pointer is over an image, it will be opened as a "direct" image in a new tab.
- If you use ctrl + alt + shift + right-click when the pointer is over an image, it will be opened as a "direct" image in a new window.
Customizations
From the Options window, you can configure the following:
- Background color: set the color used as background when viewing an image; the value entered here must be a valid CSS color declaration (examples include "red", "#FF0000", "rgb(255,0,0)")
- Zoom factor: this numeric parameter controls how fast the zoom is performed; the default value of 200 means that at each step the zoom is either doubled or halved
- Clip image movement range: when enabled it prevents from moving the image outside of the window
- Place image at top left: if enabled it places the image in the top left corner of the window when using zoom types fill and unscaled
- Zoom on mouse pointer: when enabled, zoom operations will appear to use the mouse pointer as the pivoting point
- Invert the mousewheel zoom direction: inverts the direction you have to scroll the mousewheel to zoom in/out
- Invert keyboard navigation: inverts the direction the image is moved to when using the arrow keys
- Enabled zoom types: sets which zoom types are enabled (see the "Zoom types" section for more information)
- Default zoom type: sets which zoom type to use upon loading the image (see the "Zoom types" section for more information)
- Enabled shortcuts: as a bonus, (ctrl/ctrl+alt/ctrl+alt+shift)+right-click on any image within a regular webpage may be used as shortcut for the "View image" context-menu command
Other rarely used preferences can only be accessed via about:config:
- extensions.imagetweak.legacyscrolling - when set to true, restores the pre-0.17 mouse wheel behaviours (boolean, default: false)
- extensions.imagetweak.bordercolor - if you set here a CSS color, a thin border of that color will be displayed around the images (string, default: "")
Zoom types
A zoom type is a common (dynamic) zoom level. Four zoom types are currently implemented:
- Fit to window: the maximum zoom that allows the image to be completely inside the window (a.k.a. "touch from inside")
- Fill window: the minimum zoom that allows the image to completely fill the window (a.k.a. "touch from outside")
- 1:1: 100% (a.k.a. "unscaled")
- Free mode: the last set zoom level and position (not taking into account the other three types).
Example
This is an iframe displaying an image. If you have ImageTweak installed you should be able to try out all the above (just be sure to give it focus before using the keyboard).