Traditional work HTML-pages with pictures is the opening up of pictures instead of these pages. It is time to stop this inconvenience on any given site. Links - good, but easy viewing - better. What is a comfortable viewing? Example " Lightboxes " different shows that it is better to open psevdookno view within the document without deleting the document. But when reading the articles this approach is not very convenient. We do not see the context of the document. It turns out that visible either image or document. It is better, if the picture does not cover the text as arranged, for example, in the script Dollchan Extension Tools (suggested here ), where the picture viewer is a small part of the overall functionality of view "imadzhbordov" - about the same text-kartinochnyh flows articles. And we will do controls manage images, adding something of their own.
Briefly, what was the result
Script view pictures on the site:
- without reloading the page or in a new tab - on the page in a thin frame;
- original scale - 100% or limited scope of the window;
- with zooming with the mouse wheel;
- without shading surrounding document;
- to drag the mouse on the window space;
- support for Firefox / Chrome / Opera.
See the picture that are:
- provides links to the full image;
- forcibly reduced in scale (do not fit into the column);
- placed at 100%, but can be viewed with the increase (initially 200% or in a window);
- are larger than 22 pixels.
- to link to the picture can be in a new tab by holding down Ctrl, or the middle mouse button;
- search in one of five search engines pictures - Google, Tineye, Yandex and a couple of other (hold Shift while clicking to see this menu.)
Settings (changes in the settings menu):
- script by default;
- preloading images on the links off (to prevent unnecessary traffic);
- neuzhatyh viewing pictures in the initial scale of 200% by default.
Next will be successively considered: the ideas, rules of conduct interface, the details of the algorithm, examples. Review of the code will not be - it is in the implementation, written in pure JS and fulfills its role, nothing more is required. Can be used as practical, in the final implementation (take pictures and look at the site) as well as for installation on another site (LGPL v3). And now - all the details ...
The reasons (for a better life)
We have several occurrences of tags with images in HTML, when desirable improved approach to viewing. Consider the examples and come up with rules on how best to proceed with viewing the pictures.
1) Link. Page is referenced, leading to a static image with the extension jpg, jpeg, gif, png.
Example: link to the picture (randomly taken cursor type schemes).
Example 2: A link to the big picture: infographics about Android (300 K) of the article «Android in Figures" .
Solution: display the image (making it boot) a reduced-size next to the link. On click - view.
If you go to view the picture in full size, the picture appears in the center of the window, taking place on the maximum width or height. Mouse wheel it is scalable, and drag - move. Click on the original image or viewing - close viewing. Click on another preview - go to view another picture.
2) Mini-preview. On a mini-image with a link that reveals the (usually) increased from the 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 see its size. By clicking on a link - to view.
It must be emphasized that in cases 1 and 2, we make the download of pictures on the links in the automatic mode - all the links on the page. If there is no unlimited internet, we must remember that these methods lead to excessive viewing traffic, especially if the author of the texts hid under the multi-megabyte download links. So, we need to be able to disable and enable these modes control "load links."
3) Restriction on width. Page by beautiful design pictures squeezed to fit the width of the text column. I want to see full-width, but it is necessary to expand the browser window.
Example: the broad picture (204 K)
The solution: an image marked with a cursor, for example, «move»
4) what to do when we see a picture, perfectly placed in the text?
Example: a small image:
Solution: There are 2 options: either do nothing (setting "Double the pictures look" disabled), or to show an enlarged 2 times and celebrate a special keys (for example, «ne-resize» -
(Types of system cursor browser in Windows , in other systems , how to change the mouse cursor .)
Cases 3 and 4 do not require additional downloads of pictures, and only improve the view. Therefore, they can not disable user settings site. They intercept clicks on the links, so if you do not provide will be inconvenient way of a link, "Right Click - View in a new tab." Therefore, the script implies disabling the option to view, If you hold down Ctrl.
Rule 2 is a more detailed
(2.a) Some pictures under the link to the picture. Has a reference to a static image, determined by the file extension, and inside - different, perhaps, complex HTML-content.
The solution:
*) If no link tags in images, put a small copy of the downloaded image on top (no more than 200 by 200 pixels.).
*) If there is only one picture with tags around, and perhaps with the text, we assume that it is - a classic in the form of a small preview image with a link to more.
*) If the link has a complex internal structure (more than 1 tag IMG), then build separate preview for reference and separately - internal links, viewing the pictures. (This is rare, but it has to be taken into account in the algorithm. They can, for example, to make a compound word of the pictures and hang a link.)
If you got a big picture - over 50% of the width of the window, put the cursor to indicate the view to 100%. Viewed with increasing 200%, if the width of pictures - less than 50% of the width of the window. By clicking on the link will open drawing.
Example: a complex case: cursors: outside - a reference to a table with cursors and small pictures inside:
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
From the rules of the following algorithm. First run through the area of HTML (or DOM), are looking for links to pictures. Finding, checking the number of IMG tags inside. If 0 - View the links by clicking on the image formed separately. If one - to arrange viewing by clicking on the link IMG, and IMG added to the class class-sign "do not add your own view» (_noAddOwnView). If more than one tag IMG - view links separately, as in the case 0 tag IMG, IMG, and each is viewed as a separate (but they are prepared to watch will be in the 2nd pass).
The second pass elements seeking IMG. All without having _noAddOwnView, drawn to view (appears before them with a nested DIV invisible invisible image - a double IMG, to measure its actual size). On all _noAddOwnView added the same view, but the image is replaced by the address of parental links (link may not be the parent of the first level, and more). All pictures are for preview started on the 1st pass not affected (eliminated by class _noAddOwnView).
Special empowerment
Official pictures and other references are framed within a reference. But clicks on the pictures captured by preventDefault (), that is, the links do not work. It would be interesting to have a normal behavior of links, if we want to show an image in a new tab by pressing the mouse button before the Ctrl (as usual in Firefox and Chrome to open links in new tab). Therefore, by pressing Ctrl view all activities are canceled, that the link opens in a new tab.
To get some more opportunities, while holding the Shift show the context menu for images. It will contain all the desired operations can not be accommodated at the click of the mouse. For example, viewing the preview images in large size (that hid with the reference around, although it is unlikely to see the picture preview), search through search engines pictures (5 links). If desired, on the other added features.
Let the pictures as small (less than 23h23 pixels.), Sometimes used as a service, such as these:
Not provided a preview. Implementation
All of these options can view the script HabrAjax version 0.901 (21 January 2013) on pages Habra.
Thus, users yuzerskripta freed from the shackles of viewing images on a scale or 1 to 1, or in a smaller, which is so rich in collective blogs. These images can even move to another part of the page, comments, scrolling page scrolling when viewing a picture.
And that's not all. If a user is set to "Forced Cat" Pictures from the annotations in the film are reduced (it was done a long time ago, 8 months ago). To see the full picture, it was required to view the article. Now, by clicking on the picture, it is also looking at full size and the movement of the window. All pictures are forced kata also received exemption.
Must again warn: The "load-reference pictures" increases the traffic. It makes sense to include in the unlimited plan. The script was not responsible for the unconscious flow of traffic, added user confirmation of this warning: 'Enable setting "Podgruzka drawings", but not confirmed. Do you agree with the increase in traffic through-loading pictures? '. Must once agree that will be stored in the settings.
To see an example of this celebration of life, after the installation script, visit these pages. (Select interesting articles from the recent past.) And to see everything, including the setting of "load-reference picture" (click on the logo on the right script or «HAjax» menu, user settings, and then - select the checkbox in the list - Save - reload the page ).
* " Curiosity at the bottom "- photos of Mars for the most part have a width of 1100px - squeezed in the narrow window styles for the column width. Click - and all conditionally suspended. The comments there are great photos, available for viewing on the scale.
Percentage scale shown in help text, and if it enters the limits of 88-113% can be set to 100% (or 200%, depending on the view).
* " Amazing Mars "- some beautiful large and 2 very large (on the links to them) pictures.
* " When every day as DDOS. largest Chinese website "- there is between the first and second images at the numbers" 83% "appears infographics - large JPG to 4000 pixels in height, in a reduced form occupies 200px. Without adjustment "links-load images" - it is not, and the link to perform normal viewing.
* habrahabr.ru / feed / new / or any other band with the "Forced cat." Thumbnail images are viewed at 100%, and if they are less than 200 to 120 - then 200%.
* " Javascript and canvas in the game "Life" John Conway "- very first picture under the preview of the 1300 pixels perfectly visible in the page, and the rest are fine for viewing mode« x2 »(200% of their size).
*) And, for example, the article " Catalan numbers "with a number of pictures of different size and transparency.
If it is set to "show pictures" (in the center), all the pictures on the page, the page is no substitute, as it is on the site, and not even just open in a new window, as this was not a very long time (4 months. ago) in HabrAjax, and will open in a maximum-sized images inscribed in the window frame and centered about him. If it is less than the size of the window, the image is centered. While shading prevents read page - no shading, as opposed to "Lightbox"-like scripts.
Example 1: A screenshot view more screenshots from the article about the viewer Habra on iOS . The cursor is induced on the image preview - is «ne-resize», a preview of the full size image suggests.
Example 2: A screenshot view thumbnails of force, showing that the scale is displayed in the tooltip. You can move the image to read the page, and the mouse wheel - change its scale. Click - to close. Click on the original picture - too.
Besides BEFORE Dollchan functionality, expanding facilities. Holding down Ctrl while clicking on the original image, it opens in a new tab. With Shift - opens search menu image search engines. Another group of facilities open to work with the force of the thumbnails of "compulsory kata." If it is reduced, click on it shows it in its original size format viewing pictures.
Not overlooked show pictures of infographic branches comments - recent experimental visualization tree comment. Near the branch indicated by the images in the form of small orange-yellow rectangles. To restore the icon shows the name of the picture and the small pixel size (if the "load-reference image"), and a click - to view the full image. Thus, without having to scroll the preview window, you can quickly see which images sketched in a long tree comments, sometimes up to a dozen or more browser windows.
Example 3: The article, which has a lot of pictures in the comments: " LED strip as light up a room . " Even that one picture that is presented as a link, looks like a "light orange" flat rectangle in the matrix of links. Remain previewing pictures that can not boot (the bottom row of the picture of someone's dropbox).
Finally, fixed and quite sore the existing layout of images: they can not be greater than the bandwidth of the article or view the tape. If the script detects that the picture is forcibly reduced layout, he applied to it the same methods of viewing. Now and in the narrow windows, you can view all the pictures, not expanding the window and opening them in a new tab. Examples from the beginning of the article perfectly illustrates the results, if you set HabrAjax and pereotkroete this page.
Codes
All codes of this functionality, not including the procedures used, is recorded in yuzerskripte HabrAjax under the names of functions addFullImg, handlImgViews in pure JS and occupy approximately 200 lines.
Basic algorithms were taken from Dollchan-script, but their use is strongly transformed, changing from 6.7 to 2 basic functions, as well as use your own tools (library functions) instead of the original. This helped to better structure the code, although the task was not complete processing the original - some of the "tools" were taken in its original form ($ pd, $ offset).
You can use them to build your own picture viewer (LGPL v3). But especially a problem (to make a plug for connecting image viewing) also did not stand, so the code in a separate lined Githabe (yet) no. However, copying the image viewing functions and configuration tag to your own site, it can be done, like the work of copying of Dollchan. Feature - These scripts do not support IE8 and below. To support the need to make cross-browser add-ons, for example, be used for the function selector jQuery $ ().
Articles
0 commentaires:
Enregistrer un commentaire