The article describes the procedure for installing the cloud-zoom plugin based on jQuery, and also describes the auxiliary settings of the plugin for optimizing the display of the magnifying window.
Quite often, on resources with a large supply of graphic material, they resort to using a magnifying glass. For example, there is an image of large size and resolution. In order for it to fit into the visible area of the screen, it will need to be reduced, which will impair the readability of the picture and it will be difficult to see the details. In this case, a special plugin will help, which will locally enlarge certain areas of the image when hovering. Also, this technique is very often used in online stores so that a potential client can study the product offered to him in detail.
It is worth noting that there are quite a lot of similar software packages on the Internet that allow you to implement a magnifying glass for images. Therefore, it is logical to choose the most optimal option from the whole variety of plugins. During my analysis, I chose 3 main criteria by which I made the selection:
- support for different browsers;
- scope of functionality;
- the volume of the plugin and the speed at which it works.
The first option that perfectly matched my criteria was cloud-zoom. This article will focus on the installation and operation of this script only, and subsequent solutions that also meet the criteria will be discussed in future articles.
InstallationSo, cloud-zoom. The author of this development is a certain Professor Tucha, it is worth respecting his work and thanking him for this product. First of all, I would like to note the main advantage of the script in comparison with others - the ability of the code to interact with different gallery formats.
The first step in installing the plugin will be to download the latest jQuery, also directly, the file of the plugin itself and the style sheet for it. All this can be found on the official product resource.
After the necessary documents have been downloaded and placed in the appropriate directory of your resource, you can proceed to the code part of the installation. In the head tag we include the style sheet for our magnifying glass, and in the body of the site itself we insert a script tag that will connect the software of our plugin. An example of code that accomplishes the above tasks is given below.
HTML
/*in head*/< link rel= "stylesheet" type= "text/css" href= "cloud-zoom/cloud-zoom.css" />/*in body*/< script type= "text/javascript" src= "https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" > < script type= "text/javascript" src= "cloud-zoom/cloud-zoom.1.0.2.js" >
If you have successfully connected everything, you can proceed to the next installation stage. This will be the insertion of a framework for the correct operation of the plugin, it should look like this
HTML
< a class = "cloud-zoom" href= "big-img.jpg" > < img src= "small-img.jpg" />
As you can see, there is nothing supernatural in the standard design of the HTML body of the plugin: a link to an enlarged image and the image itself inside it. I also want to note that it is fundamentally important to specify the plugin class, otherwise the script will not work. If everything was done correctly, then in the browser you will see something like the following:
As you can see, the magnifying glass window is firmly stuck to the smaller version of the picture. This shortcoming is eliminated through special settings that adjust the design and position of the magnifying glass window. In this example, we’ll look at how you can correct the location of the magnifying glass window
HTML
< a class = "cloud-zoom" href= "big-img.jpg" rel= "adjustX: 20, adjustY: 0" > < img src= "small-img.jpg" />
This entry means that we have slightly redefined the window output coordinates relative to the X axis. Also note that all settings for the plugin are written in the rel attribute, separated by commas. Checking if our command worked
Below is a list of all possible plugin settings and a brief description of them.
- zoomWidth – determines the size of the window width for displaying a local image enlargement. If nothing is specified for this parameter, the window will repeat the value of the image width.
- zoomHeight – determines the size of the window height for displaying a local image enlargement. If nothing is specified for this parameter, the window will repeat the height of the picture.
- position – overrides the window position for display. Similar to the CSS property of the same name, it takes the values "left", "right", "top" and "bottom". The position is set relative to the picture in question. You can also determine the window display in the required container through binding to an identifier. The value "blockId" is responsible for this.
- adjustX – sets the position of the magnifying glass window relative to the x-axis coordinates.
- adjustY – sets the position of the magnifying glass window relative to the ordinate axis.
- tint – is responsible for the color of the frame that frames the magnifying glass window. Doesn't work when using the softFocus parameter.
- tintOpacity – determines the transparency of the borders of the magnifying glass cursor.
- lensOpacity – determines the transparency of the boundaries of the magnifying glass window.
- softFocus – gives a blur effect to the part of the picture that is not captured by the magnifying glass cursor. Doesn't work when using the tint parameter.
- smoothMove – allows you to configure smoother movement of the magnifying glass cursor in the area of the image being studied.
- showTitle – Corresponds to the functions of the regular title attribute.
- titleOpacity – allows you to control the transparency of the block with the description of the image.
At the same time, the settings include formatting the style sheet. Below is a list of all table selectors, as well as which of them corresponds to which element of the magnifying glass:
- .cloud-zoom-lens is a cursor that defines the local zoom zone.
- .cloud-zoom-title – is responsible for styling the magnifying glass title.
- .cloud-zoom-big – windows for displaying enlarged images. – design of the information loading message.
In the case when we work with the gallery, the structure of the code changes slightly, and at the same time several new settings options appear. Let's look at a live example
HTML
< a class = "cloud-zoom" href= "big-img.jpg" id= "loupe1" rel= "position: "right", adjustX: 10, adjustY: 0" > < img src= "small-img.jpg" width= "200" /> < ul> < li> < a class = "cloud-zoom-gallery" href= "big-img.jpg" title= "" rel= > < img src= "small-img.jpg" width= "100" /> < li> < a class = "cloud-zoom-gallery" href= "masdefault.jpg" title= "" rel= "useZoom: "loupe1", smallImage: "small-img.jpg"" > < img src= "masdefault.jpg" width= "100" height= "114px" /> < li> < a class = "cloud-zoom-gallery" href= "kostyum" title= "" rel= "useZoom: "loupe1", smallImage: "small-img.jpg"" > < img src= "kostyum.jpg" width= "100" height= "114px" />
In appearance it resembles a regular gallery created using a bulleted list. The elements of the cloud-zoom plugin are also already recognized, indicating some of its settings. In this case, you need to pay attention to the useZoom command, which binds each gallery element to the main viewing block. The connection is formed by matching identifiers. In addition, another parameter has been added - smallImage, which in turn determines which image to show in a reduced format. It is worth noting that for the gallery mode you need to have three images: 2 that will interact with the plugin, and another one in a smaller version to create a list of icons.
In practice this example would look like this
If ajax is used to launch the gallery, the plugin may not work. To fix this bug, you need to re-initialize the plugin. In standard form it looks like this
JavaScript
jQuery(".cloud-zoom, .cloud-zoom-gallery" ) . CloudZoom() ;
SummarizingIn conclusion, I would like to note the ease of use of the plugin and the flexibility when making adjustments to the design of this functional element. In addition, we are pleased with the high cross-browser compatibility rate and the small size of the script - only 6 kilobytes. Support for gallery mode deserves special attention. The only thing that is a little confusing is that all the settings are made directly into the HTML document; this clogs up our code a little. It would be more practical to put them in an external js file. Well, in general, the plugin is worthy of attention and recognition.
The image magnification plugin Zoomy, which simulates a real magnifying glass, was reviewed. In some cases, its use is inconvenient, since the magnifying glass covers the main picture and makes it difficult to focus on the desired area. For precise positioning of the magnification point, you can use another version of the magnifying glass - jLoupe. This plugin for the free jQuery script library was developed by web designer Chris Iufer. It has significantly more settings and allows you to create beautiful effects that simulate a magnifying glass, displaying an enlarged image fragment next to the pointer cursor.
Three options for the jLoupe plugin are shown in the figure. On the left is a drop-shaped magnifying glass and is a link to the output of a full-scale image, in the center is a rectangular magnifying glass without a link, on the right is a magnifying glass in the form of a circle. Unfortunately, rounding, just like in the previously discussed magnifying glass plugin Zoomy, does not work in browsers IE6 - IE8. That’s why the magnifying glass in them is always rectangular, and the right version is, in general, a complete disgrace.
Examples of the jLoupe plugin Installing the Loupe plugin jLoupe
First, download the archive. Then, as always, to avoid confusion, let's create a new folder on the site, calling it jloupe, and unpack the downloaded archive into it. We will get three files:
jquery-1.8.3.min.js, jquery.jloupe.js and a supporting image for the round magnifying glass loupe-trans.png.
For the plugin to work, you just need to set class="jloupe" for the image, and the magnifying glass output itself can be organized in several ways:
1. Create two images - the main one (image.jpg) and the enlarged one (image_big.jpg). In the image tag placed on the page, indicate the path to the enlarged version using the data-original attribute:
.
2. Use only one enlarged image, and to reduce it in the browser, set the required dimensions on the page using the width and height attributes. Just remember that scaling done by the browser usually degrades the image quality:
.
3. If you need to provide a link to open a large image or other object, then use the following form:
.
This completes the installation of the jLoupe plugin, and you can see how it works by opening the page with the image in the browser.
Important Note: If your site uses several jQuery plugins, then it is more convenient to move the jquery.js file (preferably the latest version) to the root folder so as not to download it several times. In this case, the line for accessing it will look the same for all plugins. In particular, for our example it turns out like this:
.
It is not recommended to use several different versions of jQuery on the same page so that they do not conflict with each other. At the same time, be sure to check that the plugins work with the installed version of jQuery, since not all versions are interchangeable.
The basic settings for the jLoupe magnifier are set in the jquery.jloupe.js file. To change them, open it in any HTML editor or Notepad. At the very beginning of the file there are lines with available settings that can be changed:
| width | 200 | width |
| height | 200 | height |
| margin | 6 | indentation around the magnifying glass |
| cursorOffsetX | 10 | horizontal distance from cursor |
| cursorOffsetY | 10 | vertical distance from cursor |
| color | false | allow colors |
| borderColor | "#999" | border color |
| backgroundColor | "#ddd" | background color |
| radiusLT | 0 | upper left radius of magnifying glass rounding |
| radiusLB | 100 | lower left radius of magnifying glass rounding |
| radiusRT | 100 | upper right radius of magnifying glass rounding |
| radiusRB | 100 | lower right radius of magnifying glass rounding |
| image | false | external image address for the magnifying glass (image url) - determines the type of magnifying glass. In the right example, this is a circle image loupe-trans.png |
| repeat | false | repetition background image |
| fade | true | using darkening when outputting a magnifying glass |
| fadeIn | true | darkening time when opening (ms) |
| fadeOut | true | darkening time when closing (ms) |
For example, for the teardrop-shaped magnifying glass shown at the top of the article (on the left), the default settings are used, and for the right picture the following are used:
radiusLT: 100,
margin: 12,
borderColor: false,
backgroundColor:"#ffffee",
image: "jloupe/loupe-trans.png"
For the rectangular magnifying glass option (in the center), no external image is required (image: false):
radiusLT: 0,
radiusRT: 10,
radiusRB: 0,
radiusLB: 10,
width: 300,
height: 150,
borderColor: "#f2730b",
backgroundColor: "#000",
fade: false,
image: false
For other programs for enlarging images, as well as creating photo galleries, image carousels and slide shows on the site, see and in the section "
In this tutorial we will look at creating a magnifying glass effect for a static image using only jQuery and CSS.
Step 1. XHTMLThe markup to achieve the effect is quite simple. we only use a few div and image.
demo.html
div#iphone displays the iPhone frame. Inside it is located div#webpage with a screenshot of the page. The screenshot is shown at half its actual size, so we use the same image for the small version (shown in the iPhone frame) and the large version, which is shown in the round window.
There is also div#retina, which is set to a round shape using CSS3. It displays a larger version of the page screenshot as the background and moves as you move the mouse cursor.
Step 2: CSS Let's set styles for div#iphone, #webpage and #retina, which will make it possible to realize the intended effect.
style.css #iphone( /* Frame div iphone */ width:750px; height:400px; background:url("img/iphone_4G.png") no-repeat center center; position:relative; ) #webpage( /* Contains page screenshot */ width:499px; height:283px; position:absolute; top:50%; left:50%; margin:-141px 0 0 -249px; ) #retina( /* Magnifying glass effect */ background:url(" img/webpage.png") no-repeat center center white; border:2px solid white; /* Positioning is absolute, so we can move it */ position:absolute; height:180px; width:180px; /* Hide by default */ display:none; /* A blank cursor, notice the default fallback */ cursor:url("img/blank.cur"),default; /* CSS3 shadow */ -moz-box-shadow:0 0 5px # 777, 0 0 10px #aaa inset; -webkit-box-shadow:0 0 5px #777; box-shadow:0 0 5px #777, 0 0 10px #aaa inset; /* CSS3 rounded corners */ -moz-border -radius:90px; -webkit-border-radius:90px; border-radius:90px; ) #retina.chrome( cursor:url("img/blank_google_chrome.cur"),default; ) #main( /* Main div * /margin:40px auto; position:relative; width:750px; )By specifying absolute positioning div on the page, we can use the vertical and horizontal centering technique, which effectively places the screenshot in the center of the iphone frame.
div#retina also gets absolute positioning, so it's possible to move it around in jQuery parts simply by setting an offset from the top and left. The div also has a screenshot of the page as a background (in its original size). Background displacement when moving div creates the illusion of enlarging a small piece of the screenshot behind it..
Also div#retina has a border radius with a value equal to exactly half its width, making it exactly round (at least in browsers that support the property border-radius CSS3 - Chrome, Safari, Opera and Firefox).
And finally, we hide the mouse pointer by setting an empty cursor (Google Chrome throws an error when rendering a completely empty cursor, so we need to set a 1px white cursor for it). Opera completely ignores user cursors, and nothing can be done about this fact. Therefore, users of this browser will have a negative experience when viewing the effect.
Step 3: jQueryThe styles are set, it's time to start programming.
script.js $(document).ready(function())( /* The code is executed when the ready event is received */ var left = 0, top = 0, sizes = ( retina: ( width:190, height:190 ), webpage: ( width:500, height:283 ) ), webpage = $("#webpage"), offset = ( left: webpage.offset().left, top: webpage.offset().top ), retina = $(" #retina"); if(navigator.userAgent.indexOf("Chrome")!=-1) ( retina.addClass("chrome"); ) webpage.mousemove(function(e)( left = (e.pageX-offset .left); top = (e.pageY-offset.top); if(retina.is(":not(:animated):hidden"))( webpage.trigger("mouseenter"); ) if(left sizes. webpage.height) ( /* If we are outside the boundaries of the page screenshot, then we hide the retina div */ if(!retina.is(":animated"))( webpage.trigger("mouseleave"); ) return false; ) / * Move the retina div behind the mouse (and scroll the background) */ retina.css(( left: left - sizes.retina.width/2, top: top - sizes.retina.height/2, backgroundPosition: "-"+(1.6 *left)+"px -"+(1.35*top)+"px" )); )).mouseleave(function())( retina.stop(true,true).fadeOut("fast"); )).mouseenter(function())( retina.stop(true,true).fadeIn("fast"); )); ));In function mousemove the current coordinates of the mouse cursor are passed as e.pageX And e.pageY, but they are absolute in relation to the entire document. Subtracting the offset div#webpage, we get the relative coordinates of the mouse cursor, which are later used for positioning div#retina.
So, in combination with the empty cursor, we create a magnifying glass effect using only JavaScript and CSS.
ConclusionThe debate between Flash and HTML5 proponents has heated up recently as people have started looking for ways to get the same level of functionality without using external applications. This approach leads to simpler applications. However, we must remember to maintain cross-browser compatibility of solutions, which is not always possible (remember IE).
I hope you liked the lesson!
The Zoomy plugin implements a beautiful effect of hovering a magnifying glass over an image. Everything is done at the highest level - the magnifying glass looks “like life”.
Tested in:
- IE 6-8
- Firefox 4
- Opera 9.5-10
- Safari 4
- Chrome
- download the jquery library or .
- (10.99 Kb) - plugin or its (4.49 Kb).
- (2.87 Kb) styles for magnifying glass.
We connect libraries and style sheets:
The HTML is simple and intuitive - a small image wrapped with a link to a larger one. For ease of initialization, we assign the class zoom to the link.
Initialize the plugin:
jQuery(function())( jQuery(".zoom").zoomy(); ));
That's all.
And now in more detailDuring initialization, you can pass the following parameters:
Parameters zoomy() EventsYou can configure the magnifying glass to turn on depending on user actions. Four events are available:
Examples of initialization with parametersSetting up the magnifying glass. We set the size, Russify the inscription, change the attribute with the address of the large image.
