Powerful Image Zoom Effect Using JQuery

Sapna
Aug 10, 2015

42k
0
1
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

Introduction

This article shows use of jQuery to create Stunning Image Zoom Effects in your site or blog. This is very useful if you have large images that will otherwise take up too much space. The jQuery library has undoubtedly made the life of JavaScript programmers easier and made it possible for non-experts to do fancy stuff themselves. With jQuery, we can do a lot of really advanced and dynamic things by writing just a few lines of code. Since its arrival, jQuery has revolutionized the way we do a great variety of web designing and developing tasks. With jQuery, we can create not only a simple photo gallery or slideshow but also some fancy animation schemes using texts and other objects.

As we all know, effects would probably be useful for e-commerce sites, but I don't see any reason why you can't use it for any other sites. The basic idea is to have the image "zoom" forward & show an approximately 25% larger version of the image. So let's get on with it.

Description

When we move the mouse over the image a magnifying glass appears alongside the image which automatically scales to show the selected region. In that effect, the grainy, scaled-up image was then replaced with a hi-resolution version of the selected region. It's great to use on product images, photos, or other images with lots of details you want users to be able to get into on command. Now it's time to see how we will make it.

Note : To run this project download my attachment "jQueryandZoomingEffect.rar"

Step 1 : First we have to create a web Application.

Go to Visual Studio 2010.
New--> And select the web Application.
Give it's a name whatever you want.
Click OK.

Step 2 : Secondly you have to add a new page to the website.

Go to the Solution Explorer.
Right Click on the Project name.
Select add new item.
Add new web page and give it a name.
Click OK

Step 3 : In this step we are adding three images in the "Image" folder of the project.

Step 4 : In this step we will see how to add style sheet code. Whenever we write the style sheet code you have to be careful that it is written inside the <style></style> code and you have to place it inside the <Head> section.

Step 5 : In this step we have to write the script reference to the aspx page; let us see from where you have to write the script code.

Right-click on both files respectively -> copy and paste it inside the <Head> section of your page; see step 6.

Step 6 : Let us see the script code that you have to add inside the <script></script> and will be placed either in the head section or body section as you want.

Step 7 : In this step we have to write the jQuery code which is given below.

Step 8 : This code is for the body of the Default2.aspx.

Body Code :

body>
    <form id="form1" runat="server">
    <p>
        <img id="image1" border="0" src="Image/image1.jpg" style="width: 300px; height: 225px" /><p>
            <p>
                <img id="image2" border="0" src="Image/image2.jpg" style="width: 300px; height: 225px" /><p>
                    <p>
                        <img id="image3" border="0" src="Image/image3.jpg" style="width: 300px; height: 225px" /><p>
    </form>
</body>

Step 9 : In this step we will see the complete code for the Default2.aspx page; let us see the code, given below.

Code :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title> Powerful Zooming Effect Using jQuery </title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="Scripts/Akshay.js"></script>
<script type="text/javascript">
        jQuery(document).ready(function ($) {
            $('#image1').addimagezoom({
                zoomrange: [3, 10],
                magnifiersize: [300, 300],
                magnifierpos: 'right',
                cursorshade: true,
                largeimage: 'Image/image1.jpg' //<-- No comma after last option!
            })
            $('#image2').addimagezoom({
                zoomrange: [5, 5],
                magnifiersize: [400, 400],
                magnifierpos: 'right',
                cursorshade: true,
                cursorshadecolor: 'pink',
                cursorshadeopacity: 0.3,
                cursorshadeborder: '1px solid red',
                largeimage: 'Image/image2.jpg' //<-- No comma after last option!
            })
            $('#image3').addimagezoom()
        })
</script>
<style type="text/css">
        .magnifyarea
        {
            box-shadow: 5px 5px 7px #818181;
            -webkit-box-shadow: 5px 5px 7px #818181;
            -moz-box-shadow: 5px 5px 7px #818181;
            filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
            background: white;
        }
</style>
body>
    <form id="form1" runat="server">
    <p>
        <img id="image1" border="0" src="Image/image1.jpg" style="width: 300px; height: 225px" /><p>
            <p>
                <img id="image2" border="0" src="Image/image2.jpg" style="width: 300px; height: 225px" /><p>
                    <p>
                        <img id="image3" border="0" src="Image/image3.jpg" style="width: 300px; height: 225px" /><p>
    </form>
</body>
</html>