جهت ورود به تالار گفتمان سایت کلیک کنید


دانلود پلاگین جی کوئری زوم بر روی تصاویر با 3 افکت زیبا + آموزش کامل و ساده

در ادامه آموزش های زبان Jquery , تصمیم گرفتم یک پلاگین بسیار حرفه ای و زیبا که این روز ها در سایت های زیادی از آن استفاده میود را در اختیار شما عزیزان قرار دهم .

این پلاگین که elevateZoom نام دارد , پلاگینی بسیار حرفه ای برای زوم کردن اتوماتیک در حالت Hover بر روی تصاویر یک وب سایت میباشد .

با استفاده از این پلاگین , دیگر نیازی به کلیک بر روی تصویر مورد نظر برای بزرگنمایی ندارید و فقط کافیست موس بر روی تصویر تغییر مکان دهد تا به صورت یک ذره بین , عمل بزرگ نمایی انجام شود .

این پلاگین دارای 3 افکت زیبا برای پیمایش روی تصاویر می باشد .

آموزش :

در ابتدا فایل های مورد نیاز رو از اینجا دانلود نمایید و سپس در روت سایت خود آپلود نمایید .

توجه فرمایید که تمامی آدرس ها به صورت پیش فرض برای قسمت روت ( root ) اصلی سایت میباشد و طبیعتا برای استفاده در پوشه ای خاص , باید آدرس دهی ها توسط شما عوض شوند .

حال در بالای صفحه ی خود و در بین دو تگ <head> و <head/> سایت خود , کد های زیر را قرار دهید .

<script src='js/jquery.js'></script>
<script src='js/jquery.elevatezoom.js'></script>

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

<img class="zoom" src="آدرس عکس کوچک" data-zoom-image="آدرس عکس بزرگ"/>

 توجه فرمایید که حتما باید عکس ها شبیه هم و فقط در دو اندازه کوچک و بزرگ باشند . اینکه چه اندازه ای باشند , دست خود شما میباشد و هر اندازه ای که بخواهید میتونید استفاده کنید .

برای مثال در دمویی که قرار داده شده , عکس کوچک در اندازه ( 250*400 ) و عکس بزرگ در اندازه ( 800*1280 ) می باشد . ( صرفا جهت اطلاع )

حال کافیست برای انجام هر افکت از 3 افکت قرار داده شده , تکه کد مربوط به اون رو در آخر کد html , یعنی قبل از دو تگ <html/> و <body/> قرار دهید .

برای افکت زوم در صفحه ای جدید ( با قابلیت زوم اسکرول ) :

<script>
$(".zoom").elevateZoom({
	zoomWindowFadeIn: 500,
	zoomWindowFadeOut: 500,
	lensFadeIn: 500,
	lensFadeOut: 500,
        scrollZoom : true
});
</script>

 برای افکت زوم داخلی :

<script>
$(".zoom").elevateZoom({
        zoomType: "inner",
        cursor: "crosshair",
        zoomWindowFadeIn: 500,
        zoomWindowFadeOut: 500,
        lensFadeIn: 500,
        lensFadeOut: 500,
        scrollZoom : true
});
</script>

 و برای افکت زوم با استایل لنز :

$(".zoom").elevateZoom({
        zoomType: "lens",
        lensShape : "round",
        lensSize    : 200,
        zoomWindowFadeIn: 500,
        zoomWindowFadeOut: 500,
        lensFadeIn: 500,
        lensFadeOut: 500,
        scrollZoom : true
});

دموی پلاگین

گرداوری : وحید مجیدی 

پخش اختصاصی

دانلود نمونه ی دموی آماده

[sdm_download id=”1234″ fancy=”0″]

جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

25 پاسخ به “دانلود پلاگین جی کوئری زوم بر روی تصاویر با 3 افکت زیبا + آموزش کامل و ساده”

  1. farshad گفت:

    با سلام
    دوستی هست تو mvc تونسته باشه اجرا کنه ممنون میشم راهنمایم کنین

  2. shima گفت:

    این پلاگین خیلی مفید و کاربردی هست اما برای سایت های ریسپانسیو قابل استفاده نیست متاسفانه

  3. هادی گفت:

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

  4. تسنیم گفت:

    سلام

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

  5. بهرام گفت:

    سلام دوست عزیز
    من همه چیز طبق آموزش شما انجام دادم اما متاسفانه اجرا نشد
    فقط عکس کوچک رو نمایش میده و هیچ زومی انجام نمیده
    اما وقتی کد پروژه شمارو کامل کپی میکنم و از عکس شما استفاده میکنم اجرا میشه
    نمیدونم مشکلم کجاست
    ممنون میشم اگر بزرگواری کنید و بنده رو راهنمایی کنید
    با تشکر از سایت خوبتون

    • وحید مجیدی گفت:

      حتما مشکلتون روی آدرس عکس ها هست . خوب دقت کنید که آدرس عکس کوچک و بزرگ و همچنین پسوند آنها به درستی وارد شده باشند

  6. king گفت:

    من دوباره به مشکل خوردم :(
    چجوری میشه مقدار data-zoom-image رو با کلیک روی هر عکس تغییر داد؟ من چندتا عکس کوچیک تو صفحه دارم که میخام با کلیک رو هرکدوم زومشو نشون بده ولی بازم برمیگرده همون عکس اول رو که تو دیتاروم نوشته شده رو نشون میده

  7. king گفت:

    مرسی پیداش کردم حل شد :) ممنونم از سایت عالیتون

  8. king گفت:

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

    • وحید مجیدی گفت:

      با سلام

      با تغییراتی در فایل css پلاگین میتوانید به راحتی این کار را انجام دهید

      طبیعتا باید کمی css بلد باشید

      • king گفت:

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

        • وحید مجیدی گفت:

          سلام دوست عزیزم . باید در css این کار رو انجام بدید . کلاس یا آی دی پنجره را پیدا کنید و در css پهنا و ارتفاع آن را بیشتر کنید

  9. منا گفت:

    آقا ممنون ، مشکلم حل شد. مرسی از مطلب خوبتون.

  10. منا گفت:

    سلام می شه راهنمایی کنید لطفا
    من همه ی کارایی که گفته بودید کردم ولی اجرا نمی شه!

  11. emad گفت:

    سلام وحید جان
    عالی بود … تشکر …
    اما یه مشکل :
    من این افکتو رو یه قالب ریسپانسیو پیاده کردم ، ولی وقتی اندازه صفحه xs بشه ، تصویر که زوم می شه از ابعاد صفحه می زنه بیرون
    به عبارت دیگه اندازه تصویر بزرگتر همراه با کوچک شدن صفحه مرورگر ، کوچیک نمی شه !

    • وحید مجیدی گفت:

      بله درسته . چون برای غیر ریسپانسیو نوشته شده . میتونید با ورود به css آن , width و height را از مقدار پیکسلی به درصدی تغییر دهید

      • emad گفت:

        وحید جان می شه بیشتر توضیح بدی
        من نتوستم width و height تصویر بزرگ رو پیدا کنم

        • وحید مجیدی گفت:

          آی دی یا کلاس مورد نظر را مشاهده کنید , سپس درون فایل css به دنبالش بگردید

  12. رضا گفت:

    من که از سیستم مدیریت محتوا استفاده نمی کنم نمی تونم از این کد استفاده کنم؟

    با تشکر

    • وحید مجیدی گفت:

      ربطی نداره داداش گلم , این پلاگین هست و بر روی html هم کار میکنه

  13. hamed2000 گفت:

    سلام داداش.اگر میشه من رو داخل یاهو اد کنید.یک کار واجب دارم.ایدی:hamedazhamejor

  14. dashesi_lamer گفت:

    عالی بود وری نایس

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *