jQuery plugin: Easy Image Zoom
I have been working on a little script for a client of mine, that required product image magnification. The task was to create a script that will allow users to see large details of the product while moving cursor over medium sized image. During the process I decided to create a jQuery plugin and share it with you guys!
Just as with all my script I try to keep things as lightweight as possible, and most important, as customizable as possible. I hope you'll find this very easy to apply to your own websites.
Introduction
First I suggest you check out the demo to see what the plugin is all about. Then come back here and continue reading this article :)
Markup
I usually start this section of my articles with the same sentence: "the markup couldn't be simpler" :) The main idea behind this and other plugins I write is - keeping the markup as simple as possible. No unnecessary elements and bloated HTML. Also markup (for all of my plugins) makes content accessible even with JavaScript turned off, which is important.
All you need for this plugin to work is anchor element containing the small image linking to the large image, but this structure is required:
<a href="large.jpg"><img src="small.jpg" alt="Small image" /></a>The script (and CSS) takes care fo the rest.
Options
This plugin is customizable with several options and simple CSS definitions. In terms of CSS all you need to do is define the newly created image zoom element's size, position and appearance. In my demo I am using this definition:
#easy_zoom{
width:600px;
height:400px;
border:5px solid #eee;
background:#fff;
color:#333;
position:absolute;
top:15px;
left:400px;
overflow:hidden;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}You will notice the line-height property... I am using if for vertical alignment of the message text that is displayed while the detailed image is loading. Of course you can use your own positioning methods, your own text, insert extra markup if you want to and add your own CSS to style the preloader. Perhaps some preloader gif as a preloader image? I'll leave that to you, what I am showing here is a bare-bone example that you can easily customize.
Let's take a look at the plugin options. Here is a list of them with default values and descriptions:
id
Default value: "easy_zoom"
The ID of the newly created image zoom element. Of course you can use your own, but make sure you update the CSS accordingly.
parent
Default value: "body"
This defines the DOM element where newly created image zoom element will be inserted. You can insert it anywhere you like in the DOM by editing this option.
append
Default value: "true"
If set to true (by default) the newly created element will be inserted as a last child of the parent element. If this option is set to false then the newly created element will be inserted as a first child of the parent element.
preload
Default value: "Loading..."
A message that appears before the large image is loaded. You can use this option to write your own preload messages and insert any HTML you want. If you want to use the preloader gifs, I suggest you go with background images.
error
Default value: "There has been a problem with loading the image."
In case the large image is not found or can't be loaded, this error message will appear. You can use this option for custom error messages.
Here's a sample code for using some custom options:
jQuery(function($){
$('a.zoom').easyZoom({
id: 'imagezoom',
preload: '<p class="preloader">Loading the image</p>'
parent: '#container'
});
});
The Anatomy of a Perfect Login Page
Let's take a look at what I think are necessary elements.
1. The title
I believe that each form should have a prominent title that briefly explains what the form is about. If you use login page, like in my example, it is important to mention the name of your website here, so the accidental visitors know where they are.
2. Non members
Non-member visitors may stumble upon your login page one way or another. Why not think of them and offer them a direct link to the registration page. It will save them some time and you increase your chance of more new member signing up.
3. Input fields and labels
Although login forms usually contain two input fields, it is important that they're styled nicely so the labels are readable, and there is no. One thing that I often notice on the various websites is the lack of clickable labels. You should use FOR attribute on labels "connect" them with appropriate input field. It is such a small effort when coding and it can make a huge difference in terms if usability.
4. Forgot password link
This is also very important link. Many users have numerous accounts and passwords and they often can't remember which one they used on your site. The best placement for this link is near the password field itself.
5. Submit button
This should, of course, be the most prominent thing in the form. For best results (by results I mean best user experience) it should always look like a button.
6. Remember me
Very useful feature that your returning users will appreciate. If your application supports it, include this option and your members will be thankful.
One thing that I believe that is very important is wrapping the checkbox and the text inside the same label. Checkboxes are small and therefor hard to click on. If you wrap entire text inside the label, you enlarge the clickable area and that way making the life easier for your users.
7. Back link
If you have full login pages, then you MUST allow users to change their mind about logging in and provide a link back to your home page.
Validation
Although the form shouldn't rely on JavaScript validation alone, I believe that JavaScript based validation scripts are important. They provide instant filtering of the valid data, allowing users to immediately correct their info and also making sure that the valid data is sent to the server-side.
DOWNLOAD
