پلاگین jQuery برای بزرگنمایی و زوم تصاویر

وقتی قصد زوم و بزرگنمایی تصاویر در وب سایت خود را دارید ، jQuery بهترین راهکار برای این منظور است . پلاگین های جی کوئری زیادی برای zoom ساخته شده است اما اغلب آن ها به دلیل مراحل پیچیده برای نصب و یا نیاز به تعدادی عکس با سایز متفاوت برای انجام عملیات زوم کارآمدی خود را از دست میدهند. توسط پلاگین Zoomy اینکار به مراتب آسان تر از قبل شده چراکه این پلاگین تنها 2 عکس برای کار خود نیاز دارد.یکی با سایز اصلی و دیگری با سایز بزرگتر به همراه چند خط کوتاه کد jQuery.

 پلاگین ذره بین با جی کوئری


سفارشی سازی این پلاگین بسیار ساده است و میتوانید بدون کاهش سرعت بارگزاری صفحه آنرا بکار گیرید چراکه Zoomy از یک بارگزار ساده برای هندل کردن تصاویر بسیار بزرگ بهره می گیرد. ذره بینی که روی تصویر حرکت میکند میتواند به صورت دایره و یا مربع باشد . همچنین با بهره گیری از امکان گرادینت در CSS3 ، شیشه ذره بین کاملا" طبیعی و به حالت عدسی شیشه ای به نظر می رسد که می توانید این امکان را فعال و یا غیرفعال کنید.

بزرگ کردن تصویر با جی کوئری

نحوه استفاده

ابتدا بسته پلاگین را دانلود نمایید :
● دانلود بسته پلاگین

فایل css موجود در آن را با نام zoom1.0.css در فولدر مربوط به فایل های css در پروژه خود کپی کنید.
فایل جاوااسکریپت موجود در بسته با نام zoomy1.0.js را در فولدر مربوط به فایل های اسکریپت در پروژه خود کپی کنید .
کدهای زیر را در بین تگ head در صفحه ای که می خواهید از این پلاگین در آن استفاده کنید کپی کنید :







پس از کپی کردن به جای کلمه های path-to در کدهای فوق ، نام فولدر مربوط به css و فولدر مربوط به js خود را قرار دهید. هر تصویری را که می خواهید زوم و ذره بین برای آن فعال شود به صورت زیر بکار گیرید :


    این تصویری است که قابلیت زوم دارد


برای شروع عمل زوم بر روی یک تصویر کافیست تابع زیر را هنگام رویداد مورد نظر فراخوانی کنید . مثلا" هنگام کلیک روی یک دکمه با عنوان "zoom" کاربر بتواند روی تصویر زوم کند:

$(function(){
    $('.zoom').zoomy();                
})(jQuery)


برای تغییر امکانت پلاگین زوم می توانید پارامترهای زیر را تغییر دهید :

$('.zoom').zoomy({
    zoomSize: 200, // میزان زوم
    round: false, // مربع و یا دایره بودن ذره بین
    glare: true, // نمایان بودن افکت عدسی ذره بین
    zoomText: click to Zoom // متنی که با قرار گرفتن ماوس روی عکس نمایان میشود
});

نظرات (7) -

  • محسن

    09/01/1390 04:48:51 ق.ظ | پاسخ به این نظر

    سلام.

    واقعا عالی بود.

    من در طراحی وب تازه کار هستم.

    پلاگینهای جی-کوئری زیادی توی اینترنت هست اما متاسفانه وقتی سورس هاش رو دانلود میکنم، دقیقاض نمیدونم باید چطور اونو برای پروژه خودم پیاده سازی کنم.

    یعنی دقیقاً کدوم قسمت از اسکریپت هارو بردارم و استایلهای سی-اس-اس رو چه بخشهایی رو بردارم و کجاهارو تغییر بدم.

    فقط تو سایت شما دیدم که کامل با جزئیات توضیح دادین نحوه استفاده و ویرایش پلاگین رو.

    امکانش هست اگر پلاگین خاصی بود براتون بفرستم تا با جزئیات برام توضیح بدین؟

    • Admin

      09/01/1390 03:09:24 ب.ظ | پاسخ به این نظر

      توضیحاتی برای استفاده از یک پلاگین در یکی دیگه از پست ها برای دوست دیگری دادم که می تونید با مطالعه اون متوجه چگونگی استفاده از پلاگین ها بشید و برای سایر پلاگین ها هم همونکارو بکنید:

      www.websiteha.com/.../...8%D8%B3%D8%B7-jQuery.aspx

  • bahar

    09/07/1390 04:53:22 ق.ظ | پاسخ به این نظر

    faghat khastam begam shoma bi nazariiiiiin mamnunam

    • Admin

      09/07/1390 05:29:08 ق.ظ | پاسخ به این نظر

      ممنونم بهار عزیز، این نظر لطف شماست، امیدوارم سایر مطالب هم مورد توجه شما واقع بشه Smile

  • asma

    04/14/1391 01:36:31 ق.ظ | پاسخ به این نظر

    سلام
    میشه کد تقویم فارسی را هم بذارید.
    مرسی

  • امیر

    09/23/1394 10:57:57 ق.ظ | پاسخ به این نظر

    با سلام
    ضمن تشکر از مطالب بسیار عالی شما که من همیشه استفاده کردم.
    یه کد جی کوئری میخاستم که بتونم وقتی روی یه عکس کوچک کلیک می کنیم توی همون صفحه بزرگ نمایش بده.
    دقیقا مثل این نمونه توی این وب سایت :
    www.ijquery.ir/.../#comment-5814

    اگر بتونید این کد را بزارید ممنون میشم بسیار بسیار زیاد

Loading