For typical e-commerce websites you will often notice a detailed photo display when hovering an image. The zoom effect helps prospective buyers to see more of the product when deciding if it’s worth purchasing. This familiar image zoom effect can be applied to many other websites just to provide a better user experience.
In this tutorial I want to introduce a very simple jQuery plugin called EasyZoom. It’s all free and open source to download right from Github. The tool makes it super easy to create your own image zoom panel, which can appear on mouseover or be tied onto another event handler. Check out my live sample demo to get an idea of the final product.
Live Demo – Download Source Code
Getting Started
First you’ll want to download the jQuery plugin codes directly from Github. I’ve created 2 separate folders in my working directory for css and js files. You specifically need to copy over easyzoom.js and easyzoom.css. Also download or link to a CDN with the latest version of jQuery and include all these files into the document head.
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>Image Hover Zoom Effect - DesignMag Demo</title>
<meta name="author" content="Jake Rocheleau">
<link rel="shortcut icon" href="http://designm.ag/favicon.ico">
<link rel="icon" href="http://designm.ag/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
<link rel="stylesheet" type="text/css" media="all" href="css/easyzoom.css">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/easyzoom.js"></script>
</head>
My own custom styles.css stylesheet is used to create the page layout. EasyZoom does have its own features and classes which are targeted inside the other stylesheet. You can obviously choose to overwrite them if you need the design in a slightly different manner.
<div id="w">
<h1>Image Zoom Magnifying Effect</h1>
<p><em><a href="http://www.flickr.com/photos/rykneethling/5679896974/">featured image source</a></em></p>
<h2>@2x Zoom</h2>
<div class="easyzoom easyzoom--adjacent">
<a href="images/autumn@2x.jpg"><img src="images/autumn.jpg" alt="autumn road" width="480" height="320"></a>
</div>
<h2>@3x Zoom</h2>
<div class="easyzoom easyzoom--adjacent">
<a href="images/autumn@3x.jpg"><img src="images/autumn.jpg" alt="autumn road" width="480" height="320"></a>
</div>
</div><!-- @end #w -->
In the HTML code you will notice the container object uses a class .easyzoom. By including a secondary class for .easyzoom–adjacent it will force the image zoom to appear next to the image. Everything is self-contained inside the HTML where the larger image URL will be inside a containing anchor link.
There are some extra classes for displaying image zoom effects off to the side, or right within the photo itself. Both of these samples are available in the Github archive if you want to see the code examples.
Common CSS Styles
There isn’t a whole lot of detail worth explaining within the EasyZoom stylesheet that can’t be understood with a quick glance. Container divs are positioned absolutely with relativity to the outer container. This way it’s simpler to ensure the hover image will appear off to the side, and you can adjust these coordinates using properties such as top: 15px.
.easyzoom-flyout {
position:absolute;
z-index: 100;
overflow: hidden;
background: #fff;
}
/**
* EasyZoom layout variations
*/
.easyzoom--overlay .easyzoom-flyout {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.easyzoom--adjacent .easyzoom-flyout {
top: 0;
left: 100%;
width: 70%;
height: 70%;
margin-left: 15px;
}
In my stylesheet the first line includes a relative web font named Balthazar. I’m only using this in the page title for a bit of extra design spice. Everything else follows typical page resets along with a wrapper div using the ID #w.
@import url('http://fonts.googleapis.com/css?family=Balthazar');
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { overflow-y: scroll; }
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 62.5%;
line-height: 1;
color: #414141;
padding: 25px 0;
background: #f3f3f3 url('bg.png'); /* http://subtlepatterns.com/straws/ */
}
br { display: block; line-height: 1.6em; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
input, textarea {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; }
h1 {
font-family: 'Balthazar', 'Trebuchet MS', Tahoma, sans-serif;
color: #515151;
font-size: 4.4em;
line-height: 1.4em;
margin-bottom: 10px;
letter-spacing: -0.05em;
text-align: center;
}
h2 {
font-family: Arial, Tahoma, sans-serif;
color: #676767;
font-size: 2.6em;
line-height: 1.3em;
margin-bottom: 6px;
letter-spacing: -.075em;
}
p {
font-size: 1.4em;
line-height: 1.1em;
margin-bottom: 15px;
}
a { color: #85aed1; }
a:hover { color: #91bbde; }
/** page structure **/
#w {
display: block;
width: 860px;
margin: 0 auto;
background: #fff;
padding: 5px 11px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 1px 3px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 3px 2px rgba(0,0,0,0.3);
box-shadow: 1px 2px 3px rgba(0,0,0,0.3);
}
My resets are based off the template by Eric Meyers and has been adapted as such. I find that some people prefer using content-specific resets rather than global ones. It all comes down to how you build websites and your own personal preferences. Customizing or editing the default EasyZoom classes will require most of your attention.
EasyZoom JS
This last bit of code should be held within <script></script> tags at the bottom of the page, before you close the body. We only need to call a single line of code in reference to the EasyZoom plugin.
$(function(){
var $easyzoom = $('.easyzoom').easyZoom();
});
The reason for picking .easyzoom as the class selector just follows typical naming conventions. You could update this to follow another class or even a single element ID. Basically you should target an element which contains the regular image, and that tag should be wrapped around a link pointing towards the bigger image.
You might also notice in my code that I’ve setup 2 different examples. The larger images follow a naming scheme of autumn@2x.jpg and autumn@3x.jpg for being double and triple in size, respectively. You might prefer to include the largest sample image you can find, making for a better overall user experience.
Please check out the plugin’s live demo page which also includes function options and API calls at the bottom. Documentation is sparse because there isn’t a whole lot that needs customization. Using the .show() API method you can pass an individual mouse event which only displays the image zoom under certain conditions.
Overall this is a pretty simple configuration and it’s great for any website. Many other plugins also run on jQuery which makes this plugin another powerful resource for developers.
Live Demo – Download Source Code
Closing
These code samples are not too difficult even for a beginner who has never touched jQuery. There are some alternative options that you can supply, but they’re only needed within more advanced layouts. Writing the most basic JS code will allow you to create a simple interface that works great in almost any website layout. Feel free to download a copy of my tutorial codes and see what else you can build with this plugin.
Source: http://designm.ag/tutorials/code-an-image-zoom-hover-display/
No comments:
Post a Comment