jQuery: jQZoom - magnifier.
jQZoom is a small jQuery plugin written by Marco Renzi .
jQZoom is a magnifying glass that is convenient to use with limited space to accommodate large images.
You can easily give your users the opportunity to view the details of the image by moving the magnifying glass over the thumbnail.
Demo
The necessary files are connected to the HEAD section, there are two of them - this is the jQuery library itself (by the way, version 1.2.3 appeared not so long ago), and the jquery.jqzoom.js file.
')
Download plugin
As for the styling - here you can create. Do not forget that the plugin uses class names, so it is better not to change them. I will not give the CSS code, it can be viewed in the sample file and besides it is simple.
But here is a fragment of the HTML code responsible for displaying a small image, since there will be nuances.
The picture is inserted into a div element with the class name jqzoom . In principle, you can simply assign this class and the img tag ... With the src attribute, everything is clear - the relative path to the small image file. Pay attention to a certain attribute jqimg . Its value is the relative path to the large image file.
This is not a very elegant solution, since such a code will not pass the test for validity, because there is no such attribute.
Well, the most interesting thing is that you need to add more to make it work? In the simplest case, with the default settings, only this:
However, there are additional options with which you can control the display. See this option:
As usual, everything is “wrapped” by the function $ (document) .ready (function () {}); which tracks the availability of the DOM. Next, select all elements with the class name jqzoom and call for them the jqueryzoom plugin, to which we pass additional parameters.
xzoom is the width of the div element where a part of the large image will be displayed. The default is 200px.
yzoom is the height of the div element where a part of the large image will be displayed. The default is 200px.
offset - indent of the div element, where a part of the large image will be displayed from the main image (miniature). The default is 10px.
position - the position of the div element where the part of the large image will be displayed. Default is right.
True, the author of the plugin did not provide a list of acceptable values, but you can guess that, besides right, it is also probably left.
preload - the number of preloadable large images. The default is 1.
Ist.
jQZoom is a magnifying glass that is convenient to use with limited space to accommodate large images.
You can easily give your users the opportunity to view the details of the image by moving the magnifying glass over the thumbnail.
Demo
The necessary files are connected to the HEAD section, there are two of them - this is the jQuery library itself (by the way, version 1.2.3 appeared not so long ago), and the jquery.jqzoom.js file.
')
Download plugin
As for the styling - here you can create. Do not forget that the plugin uses class names, so it is better not to change them. I will not give the CSS code, it can be viewed in the sample file and besides it is simple.
But here is a fragment of the HTML code responsible for displaying a small image, since there will be nuances.
The picture is inserted into a div element with the class name jqzoom . In principle, you can simply assign this class and the img tag ... With the src attribute, everything is clear - the relative path to the small image file. Pay attention to a certain attribute jqimg . Its value is the relative path to the large image file.
This is not a very elegant solution, since such a code will not pass the test for validity, because there is no such attribute.
Well, the most interesting thing is that you need to add more to make it work? In the simplest case, with the default settings, only this:
However, there are additional options with which you can control the display. See this option:
As usual, everything is “wrapped” by the function $ (document) .ready (function () {}); which tracks the availability of the DOM. Next, select all elements with the class name jqzoom and call for them the jqueryzoom plugin, to which we pass additional parameters.
xzoom is the width of the div element where a part of the large image will be displayed. The default is 200px.
yzoom is the height of the div element where a part of the large image will be displayed. The default is 200px.
offset - indent of the div element, where a part of the large image will be displayed from the main image (miniature). The default is 10px.
position - the position of the div element where the part of the large image will be displayed. Default is right.
True, the author of the plugin did not provide a list of acceptable values, but you can guess that, besides right, it is also probably left.
preload - the number of preloadable large images. The default is 1.
Ist.
Source: https://habr.com/ru/post/24556/
All Articles