Scalable image display

The traditional work of HTML pages with images is to open images instead of these pages. It is time to stop this inconvenience on a single site. Links are good, but comfortable browsing is better.

What is easy viewing? The example of different lightboxes showed that it is better to open the pseudo-window view inside the document without deleting the document. But when reading articles, this approach is not very convenient. We do not see the context of the document. It turns out that either the picture or the document is visible. It is better if the picture does not close the text, as organized, for example, in the Dollchan Extension Tools script (suggested here ), where viewing pictures takes up a small part of the overall functionality of imaging boards - roughly the same text-picture streams of articles. We will also make control of image management by adding something of our own.

Briefly: what happened in the end

Script view pictures on the site:

• without reloading the page and not in a new tab - on the center of the page in a thin frame;
• the initial scale is 100% or limited by window frames;
• with scaling mouse wheel;
• without shading the surrounding document;
• dragging the mouse over the window space;
• Firefox / Chrome / Opera support.

Implementation - user script for 1 site.
Look at the pictures that:

• represented by a link to the full image;
• forced to scale down (do not fit in the column);
• fit on a scale of 100%, but can be viewed with an increase (initially 200% or within a window);
• are larger than 22 pixels.

Additionally:

• You can click on the link in the figure in a new tab, if you hold Ctrl, or on the middle mouse button;
• Search in 1 of 5 search engines by pictures - Google, Tineye, Yandex and a couple of others (hold Shift on clicking to see this menu).

Settings (change in settings menu):

• the script is enabled by default;
• Preloading images from links is disabled (preventing unnecessary traffic);
• Uninvited viewing of pictures at the initial scale of 200% is enabled by default.

Next will be considered sequentially: ideas, rules of interface behavior, implementation details, algorithm, examples. Consideration of the code will not be - it is in the implementation, written in pure JS and fulfills its role, nothing more is required. It can be used both practically in the finished implementation (we take and watch pictures on the site), and for installation on another site (LGPL v3). And now - in all details ...
')

Reasons (looking for a better life)

We have several cases of appearance of tags with images in HTML, when an improved approach to viewing is desirable. Consider the examples and come up with the rules of how best to proceed with viewing pictures.

1) Link. On the page there is a link leading to a static image with the extension jpg, jpeg, gif, png.
Example : link to a picture (randomly taken types of cursor patterns).
Example 2 : link to the big picture: infographics about Android (300 K) from the article “Android in numbers” .
Solution : display the picture (making it load) in a reduced size next to the link. By clicking - view.

If we proceed to viewing the picture in full size, the picture appears in the center of the window, taking the maximum place in width or height. Use the mouse wheel to scale it, and drag it to move it. Clicking on the original image or viewing is closed viewing. Click on another preview - go to view another picture.

2) Mini preview. The page has a mini-picture with a link that reveals (usually) an enlarged original.
Example :

<a href="http://img593.imageshack.us/img593/426/snaphanofooter2.png" title="-    "> <img src="http://img805.imageshack.us/img805/2466/snaphanofooter2pre.png"/> </a> 

Solution : display the original in a hidden block to find out its size. By clicking on the link - view.

It is necessary to emphasize that in cases 1 and 2 we do the downloading of pictures by links in automatic mode - all links on the page. If there is no unlimited Internet, you need to remember that these browsing methods will lead to excessive traffic, if the author of the texts specifically hid multi-megabyte pictures under the links. So, you need to be able to disable and enable these modes by setting the " load links ".

3) Width limit. On the page, by virtue of the beautiful design, the pictures are compressed to the width of the text column. I want to see the full width, but for this we need to expand the browser window.
Example : wide picture (204 K)

Solution : mark the picture with a special cursor, for example, “move” . So, by clicking on it, let's move on to viewing in the maximum size.

4) what to do if we see a picture that fits perfectly in the text?
Example : small picture:

Solution : there are 2 options: either do nothing (the “ view enlarged images ” setting is disabled), or show it in an enlarged 2 times view and mark it with a special cursor (for example, “ne-resize” - or ).
(Types of browser system cursors in Windows , in other systems , how to change the mouse cursor .)

Cases 3 and 4 do not involve additional loading of pictures, but only improve viewing. Therefore, they can not be disabled by user settings of the site. They intercept the clicks on the links, so if you do not foresee anything, there will be an inconvenient way to follow the link “Right mouse button - View in a new tab”. Therefore, in the script we will consider disabling the viewing functions if the Ctrl key is held down.

More detailed rule 2

(2.a) Several pictures under the link to the picture. There is a link to a static image defined by the file extension, and inside it there is a different, possibly complex, HTML content.
Solution :
*) if there are no image tags inside the link, put a reduced copy of the downloaded image on top (no more than 200 pixels by 200 pixels).
*) If there is only 1 picture with tags around, and, possibly, with text, then we consider that this is a classic preview in the form of a small picture with reference to a larger one.
*) If the link has a more complex internal structure (more than 1 IMG tag), then a separate preview is built for the link and separately - the inside of the link, viewing its pictures. (This case is rare, but it should be taken into account in the algorithm. They can, for example, make a compound word from pictures and link it.)
If you get a big picture - more than 50% of the width of the window, put the cursor to indicate the view at 100%. Viewed with an increase of 200%, if the width of the image - less than 50% of the width of the window. By clicking the picture will open on the link.

Example : complex case: cursors: outside - a link to a table with cursors, and inside small pictures:
e-resize: , nw-resize: crosshair:

 <a href="http://edc.tversu.ru/elib/inf/0008/dhtml/figs/dht2_1103.gif"> e-resize: <img src="http://css2.itsoft.ru/interface/cursor/cursor-eresize.gif"/>, nw-resize: <img src="http://css2.itsoft.ru/interface/cursor/cursor-nwresize.gif"/>, crosshair: <img src="http://css2.itsoft.ru/interface/cursor/cursor-crosshair.gif"/> </a> 

Algorithm

The algorithm follows from the rules. First, run through the HTML area (or DOM), look for links to images. Having found, we check the number of IMG tags inside. If 0 - viewing the link by clicking on a separately formed image. If there is one, we arrange viewing the link by clicking on IMG, and the class-attribute “do not add your own view” (_noAddOwnView) is added to the IMG class. If more than one IMG tag - viewing the link separately, as in the case of 0 IMG tags, and each IMG is also viewed separately (but they will be prepared for viewing in the 2nd pass).

The second pass is looking for an img Anything that doesn’t have _noAddOwnView is processed for viewing (an invisible DIV appears in front of them with an embedded invisible picture — an IMG duplicate, to measure its actual size). The same view is added to all _noAddOwnView, but the picture is replaced with the address of the parent link (the link may be a parent not of the first level, but older). All preview images created on the 1st pass are not affected (are eliminated according to the class _noAddOwnView).

Special features

Service pictures and the rest inside links are framed with a link. But clicks on images are intercepted by preventDefault () , that is, links do not work. It would be interesting to have the usual link behavior if we want to view the image in a new tab by pressing the Ctrl key before clicking (as is customary in Firefox and Chrome to open the link in a new tab). Therefore, by pressing Ctrl all viewing actions are canceled so that the link opens in a new tab.

To get some more features, with the Shift button held down, we show the context menu for images. It will contain all the desired operations that do not fit on the mouse click. For example, viewing previews in an enlarged view (that which was hidden when there is a link around, although you hardly need to view the previews), search through image search engines (5 links). If desired, other options are added to the menu.

Let also small pictures (less than 23x23 pixels.), Sometimes used as service ones, such as: are not provided with a preview.

Implementation

All these viewing options are possible with the HabrAjax script version 0.901 (dated January 21, 2013) on the Habr pages.

Thus, users of the user script were freed from the fetters of viewing pictures on a scale of either 1 to 1, or in a smaller one, which collective blogs are so rich with. The picture can even be moved to another part of the page, comments, scrolling the page scroll in the picture viewing mode.

And that's not it. If the user has turned on the " Forced Cat " setting, the pictures from the annotations in the tape are reduced (it was made quite a long time, 8 months ago). To see the full pictures, it was required to view the article. Now, by clicking on the picture, we also look at it in full size and with moving around the window. All pictures of the forced kata were also released.

It is necessary to warn again: the setting " load links-pictures " increases traffic. It makes sense to include it on unlimited tariff plans. To prevent the script from being responsible for the unconscious consumption of traffic, a confirmation by the user of this warning has been added: ' The' Load images ' setting is enabled, but not confirmed. Do you agree with the increase in traffic by uploading pictures? '. It is necessary to once agree that it will be remembered in the settings.

To look at examples of this holiday of life, after installing the script, visit these pages. (Select interesting articles from the recent past.) And to see everything, turn on the " load links-pictures " setting (click on the script logo on the right or on "HAjax" in the user settings menu, and then select the checkbox in the list - Save - reload page ).

* " Curiosity at the bottom " - photos of Mars are mostly 1100px wide - squeezed in narrow windows in styles across the width of the column. Click - and all the conventions removed. In the comments there are large photos, also available for viewing at the scale.

The percentage of the scale is shown in the text prompt, and when it falls within the limits of 88-113%, it is set to 100% (or 200%, depending on the type of view).

* " Amazing Mars " - several beautiful large and 2 very large (by reference to them) pictures.

* " When every day is like DDOS. The largest Chinese sites " - there is an infographic between the first and second pictures under the numbers "83%" - a large JPG of 4000 pixels in height, in a reduced form occupying 200px. Without the " load links-pictures " setting, it is not there, and the link is used for normal viewing.

* habrahabr.ru/feed/new or any other tape with the " Forced Cat " setting. Reduced images are viewed at a rate of 100%, and if they are less than 200 by 120, then at a rate of 200%.

* " Javascript and canvas in the game" Life "of John Conway " - the big first picture under the preview at 1300 pixels is perfectly visible inside the page, and the rest are taken for viewing in the "x2" mode (200% of their size).

*) And, for example, the article " Numbers Catalan " with a number of pictures of different sizes and degrees of transparency.

If the " view images " setting is enabled ( in the window in the center ), then all the pictures on the page no longer replace the page, as is customary on the site, and do not even open in a new window, as it was done not long ago (4 months). back) in HabrAjax, and open as a maximum-sized image, inscribed in the frame of the window and centered relative to it. If it is smaller than the window size, the picture is centered. At the same time, shading does not interfere with reading a page - there is no shading, unlike lightbox-like scripts.

Example 1 : screenshot of viewing a large screenshot from an article about the Habr viewer on iOS . The cursor on the preview image is “ne-resize”, and the preview tells you the size of the full image.

Example 2 : screenshot of the view of the compressed thumbnail showing that the scale is displayed in the tooltip.

The picture can be moved to read the page, and the mouse wheel - to change its scale. Click to close. Click on the original image - too.

In addition to the functionality available in Dollchan , we expand convenience. If you hold Ctrl while clicking on the original image, it opens in a new tab. Shift - opens the search menu for image search engines. One more group of conveniences opens for work with compulsory reduced pictures from "forced kata". If it is reduced, clicking on it shows its original size in the image viewing format.

Not overlooked viewing images from the infographics of comment branches - a recent experimental visualization of the comment tree. Near the branches are marked icons of pictures in the form of small orange-yellow rectangles. When you hover over the icon, you can see the name of the picture and small previews (if you “ load links-pictures ”), and on click - you can see full pictures. Thus, without scrolling through the viewing window, you can quickly assess which pictures are sketched in a long comment tree, sometimes tens or more browser windows long.

Example 3 : an article in which there are many pictures in the comments: " LED strip in the quality of room lighting ." Even that one picture, which is represented as a link, looks like a “lit orange” rectangle in an even matrix of links. Those pictures that could not be loaded remain (not in the bottom row, someone's picture from the dropbox).


Finally, the rather sore spot of the existing layout of images is fixed: they can not be larger than the width of the viewing of an article or a tape. If the script detects that the image is forcibly reduced by the layout, it applies the same viewing methods to it. Now you can view all the pictures in narrow windows without expanding the window or opening them in a new tab. Examples from the beginning of the article perfectly illustrate the results if you install HabrAjax and rediscover this page.

Codes

All codes of this functionality, not counting the procedures used, are recorded in the HabrAjax user script under the function names addFullImg, handlImgViews on pure JS and occupy approximately 200 lines.

The basic algorithms were taken from the Dollchan script, but their use was strongly transformed, turning from 6-7 basic functions into 2, and their own utilities (library functions) were used instead of the original ones. This helped to better structure the code, although it did not have the task of completely processing the source code - some of the “utilities” were taken in their original form ( $ pd, $ offset ).

They can be used to build your own image viewer (LGPL v3). But there wasn’t even such a task (to make a plugin for connecting to view images), so there is no separately laid out code on Github (so far). However, by copying the functions of viewing pictures and setting tags for your own site, this is doable, similar to the work on copying from Dollchan. Feature - these scripts do not support IE8 and below. For support, you need to make cross-browser add-ons, for example, use the jQuery $ () function for selectors.