افکت بزرگ نمایی تصویر با استفاده از jQuery

در این مقاله نحوه استفاده از jQuery در ساخت افکت خیره کننده بزرگ نمایی (zoom) تصاویر سایت یا بلاگ را آموزش می دهیم.

افکت بزرگ نمایی تصویر با استفاده از jQuery

این افکت برای زمانی که شما عکس های بزرگی دارید که از طرف دیگر فضای زیادی را می گیرند، بسیار مفید است. بدون شک، کتابخانه jQuery کار برنامه نویسان javascript را راحت تر کرده و به افراد تازه کار نیز این اجازه را می دهد که کارهای جالبی انجام دهند. با استفاده از jQuery، با نوشتن تنها چند خط کد می توانیم کارهای واقعا پیشرفته و داینامیکی انجام دهیم. با jQuery نه تنها می توان یک گالری یا اسلایدشو ساخت بلکه می توان با اضافه کردن انیمیشن و استفاده از متن و سایر اشیا این طراحی را جذاب تر کرد.

توضیح مختصر درباره نحوه کار این افکت:

زمانی که ماوس را روی یک عکس می بریم، یک ذره بین کنار عکس ظاهر می شود که به طور اتوماتیک ناحیه انتخا ب شده را بزرگ کرده و نمایش می دهد. این افکت برای نمایش محصول، عکس اشخاص و عکس هایی با جزییات بسیار که می خواهید کاربر به قسمتی از آن توجه کند، مفید است.

گام اول:

یک پروژه Web Application می سازیم و نام دلخواه خود را به آن می دهیم و ok می کنیم.

گام دوم:

یک صفحه Web Form اضافه می کنیم. در Solution Explorer روی نام پروژه راست کلیک کرده، Add New Item و سپس در پنجره باز شده Web form را انتخاب می کنیم و نام آن را Default.aspx می گذاریم.


گام سوم:

در این مرحله، سه عکس به فولدر Image اضافه می کنیم.

گام چهارم:

در این مرحله، کدهای css را در تگ style نوشته و در Head قرار می دهیم.

<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>

گام پنجم:

حال باید، آدرس ارجاع (refrence) اسکریپت ها را به صفحه بدهیم. بنابراین فایل های نشان داده شده در شکل را کپی کرده و در Head قرار می دهیم.

گام ششم:

در این مرحله، کدهای jQuery را به شکل زیر می نویسیم:

<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>

گام هفتم:

سپس کدهای مربوط به body این صفحه یعنی Default.aspx را نیز به شکل زیر می نویسیم.

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>

تا این مرحله کدهای صفحه Default2.aspx به صورت زیر می باشد:

<%@ 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>

و خروجی آن به شکل زیر است:

اگر با ماوس روی تصویر اول برویم، به این صورت در می آید:

و همینطور برای تصاویر دوم و سوم:

 

فایل های ضمیمه