JQuery Zoom Effects Jq Zoom Evolution

About JQuery Zoom Effects Jq Zoom Evolution

Description

Want to feature an image viewer in your website?

This plug-in offers a unique view of images! This plug-in not only displays the images, but allows gives you the option of zoom-in view of the displayed image. To view this magnified image, you just have to hover your mouse pointer over the image, and then a pop-out in the form of a reading glass appears, this window shows the magnified image. This image viewer also displays the title and descriptions of the images. Also, the mouse scroll is supported; this makes the visitor magnify the areas of the image that interest him. With such amazing features, the websites can be made more appealing and usable.

Main Features

If you want to add some, “ZOOM” functionality to your web page or blog it is so simple now! It’s the best way to display images in incredible detail. Users do not need to click anything – they just move their mouse over the image to see every detail of your product. It gives you an ability to add zoom on hover ability for your photos or B2B websites. It’s suitable as standalone and only zooming solution or as an addition to other “candy eyed’ image libraries as pretty Photo or Light box. What’s new in this plug-in is ability to control zooming part instantly by giving you a closer look with using JQZOOM by end user via mouse scroll which gives opportunity to enlarge areas that user is interested in.

Although the zoom works beautifully and appears to be a simple concept, there are seven different styles are involved in creating a zoomable area.

1) Standard zooms
2) Standard zooms with thumbnails
3) Reverse zoom
4) Drag zooms
5) Inner zooms
6) Always on zoom
7) Resize, zoom popup custom position, fade-in, fade-out effects

Well tested, Works on all modern browsers:

I know you look so interested. By the way, the code is as follows..

Installation

Add first the last jQuery release, then the jQZoom script (Do not forget this), the correct order is important. Look at the installation code below.

[javascript language="css"]<script type=’text/javascript’ src=’js/jquery-1.5.xx.js’></script>
<script type=’text/javascript’ src=’js/jquery.jqzoom-core.js’></script> [/javascript]

Add jqzoom.css to your header.

[javascript language="css"]<link rel="stylesheet" type="text/css" href="css/jquery.jqzoom.css">[/javascript]

How to use
Using jQZoom is easy,but you need to specify the HTML anchor element,that is going to generate the zoom revealing a portion of the enlarged image.

[javascript language="css"]<a href="images/BIGIMAGE.JPG" class="MYCLASS" title="MYTITLE">
<img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE">
</a>[/javascript]

The anchor element wraps the small image you would like to zoom.Following this schema the necessary and base elements are:

SMALLIMAGE.JPG: Represents the small image you would like to zoom.
BIGIMAGE.JPG: Represents the big image that jQZoom will reveal.
MYCLASS: Represents the anchor class,that would be used to instantiate the jQZoom script to all the elements matching this class(you can use an ID as well).
MYTITLE/IMAGE TITLE: Anchor title and/or image title that will be used to show the zoom title close to the jQZoom Window.
PAY ATTENTION: The SMALLIMAGE must be a scaled versione of the BIGIMAGE.

Now load the plugin at window load.

[javascript language="css"]$(document).ready(function(){
$(‘.MYCLASS’).jqzoom();
}); [/javascript]

This will instantiate jQzoom in default(standard) mode.You can pass more options(Documentation section),to create special or custom effects as in the example below.

[javascript language="css"] $(document).ready(function(){
var options = {
zoomType: ‘standard’,
lens:true,
preloadImages: true,
alwaysOn:false,
zoomWidth: 300,
zoomHeight: 250,
xOffset:90,
yOffset:30,
position:’left’
//…MORE OPTIONS
};
$(‘.MYCLASS’).jqzoom(options);
}); [/javascript]

Multiple thumbnails support

If you want to create galleries, jQZoom can manage it for you.

1. Attach the gallery ID to your main anchor “rel” attribute.

[javascript language="css"]<a href="images/BIGIMAGE.JPG" class="MYCLASS" title="MYTITLE" rel="gal1">
<img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE">
</a> [/javascript]

2. Manage your thumbnails “class” and “rel” attributes.
The class “zoomThumbActive” is attached to your thumbnails by jQzoom. By default specify this class to the selected
thumbnail(it should be the same image in your main anchor element)

[javascript language="css"]<a class="zoomThumbActive" href="javascript:void(0);" rel="{gallery: ‘gal1′, smallimage: ‘./imgProd/SMALLIMAGE1.jpg’,largeimage: ‘./imgProd/LARGEIMAGE1.jpg’}">
<img src="imgProd/thumbs/THUMBIMG1.jpg">
</a>[/javascript]

The structure of the thumbnail rel attribute is very important.The base elements are

gallery: the ID of the gallery to which it belongs.
smallimage: the path to the SMALLIMAGE to be loaded on the when you click on the thumbnail.
largeimage: the path to the LARGEIMAGE

[javascript language="css"]rel="{gallery: ‘gal1′, smallimage: ‘./imgProd/SMALLIMAGE1.jpg’,largeimage: ‘./imgProd/LARGEIMAGE1.jpg’}" [/javascript]

[IMAGE]

Style customizations are obviously admitted simply changing the right parameters value in the jqzoom stylesheet file.

Live Source: http://www.mind-projects.it/projects/jqzoom/

Let’s take a look how easily you can implement the JQZOOM EFFECTS

Check out the DEMO by clicking the below link. This demo shows how JQZOOM EFFECTS script works in live.

To view an live example of the script, visit the link mentioned here:

http://www.mind-projects.it/projects/jqzoom/demos.php#demo1

To get the version of the script integrated within a live template visit the website whose link is mentioned here: Boxedart.com

Interested? Want to keep yourselves updated with the latest JavaScripts and codes? Try this website a1javascripts.com for more jQuery, CSS and HTML5 techniques.

JQuery is a very powerful tool, the more you learn about, more will you be amazed what it is capable of. Stay with us for lot of upcoming articles, Guidelines with plenty of great tutorials, Resources, etc.

Comments are closed