دانلود پلاگین جی کوئری زوم بر روی تصاویر با 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″]
با سلام
دوستی هست تو mvc تونسته باشه اجرا کنه ممنون میشم راهنمایم کنین
این پلاگین خیلی مفید و کاربردی هست اما برای سایت های ریسپانسیو قابل استفاده نیست متاسفانه
سلام
ممنون از پلاگین بسیار زیبا و اطلاعات بسیار مفیدتون
فقط من یه مشکلی دارم توی فایرفاکس زوم انجام نمیشه ولی تو مرورگرهای دیگه این مشکل نیست
اگه راهنمایی کنید ممنون میشم
سلام
برای تغییر موقعیت باز شدن عکسهای زوم شده باید کجا را تغییر بدم؟
میخوام که عکسها در بالا یا زیر عکسها باز شود.
سلام دوست عزیز
باید در css دستکاری انجام بدید .
سلام دوست عزیز
من همه چیز طبق آموزش شما انجام دادم اما متاسفانه اجرا نشد
فقط عکس کوچک رو نمایش میده و هیچ زومی انجام نمیده
اما وقتی کد پروژه شمارو کامل کپی میکنم و از عکس شما استفاده میکنم اجرا میشه
نمیدونم مشکلم کجاست
ممنون میشم اگر بزرگواری کنید و بنده رو راهنمایی کنید
با تشکر از سایت خوبتون
حتما مشکلتون روی آدرس عکس ها هست . خوب دقت کنید که آدرس عکس کوچک و بزرگ و همچنین پسوند آنها به درستی وارد شده باشند
من دوباره به مشکل خوردم :(
چجوری میشه مقدار data-zoom-image رو با کلیک روی هر عکس تغییر داد؟ من چندتا عکس کوچیک تو صفحه دارم که میخام با کلیک رو هرکدوم زومشو نشون بده ولی بازم برمیگرده همون عکس اول رو که تو دیتاروم نوشته شده رو نشون میده
جواب در فروم داده شد
مرسی پیداش کردم حل شد :) ممنونم از سایت عالیتون
سلام
چجوری میشه موقعیت پنجره ای که باز میشه واسه زوم رو تغییر بدم؟
ممنون از سایت عالیتون
با سلام
با تغییراتی در فایل css پلاگین میتوانید به راحتی این کار را انجام دهید
طبیعتا باید کمی css بلد باشید
سلام ممنونم ازتون مشکلم حل شد . فقط یه سوال دیگه میخام پنجره ای که باز میشه واسه زوم رو بزرگتر کنم ولی اصن پیدا نکردم از کجا میشه این کارو کرد میشه راهنمایی کنید کجاس؟
سلام دوست عزیزم . باید در css این کار رو انجام بدید . کلاس یا آی دی پنجره را پیدا کنید و در css پهنا و ارتفاع آن را بیشتر کنید
آقا ممنون ، مشکلم حل شد. مرسی از مطلب خوبتون.
سلام می شه راهنمایی کنید لطفا
من همه ی کارایی که گفته بودید کردم ولی اجرا نمی شه!
اگه خواستین دمو بدین تا راهنمایی کنم
سلام وحید جان
عالی بود … تشکر …
اما یه مشکل :
من این افکتو رو یه قالب ریسپانسیو پیاده کردم ، ولی وقتی اندازه صفحه xs بشه ، تصویر که زوم می شه از ابعاد صفحه می زنه بیرون
به عبارت دیگه اندازه تصویر بزرگتر همراه با کوچک شدن صفحه مرورگر ، کوچیک نمی شه !
بله درسته . چون برای غیر ریسپانسیو نوشته شده . میتونید با ورود به css آن , width و height را از مقدار پیکسلی به درصدی تغییر دهید
وحید جان می شه بیشتر توضیح بدی
من نتوستم width و height تصویر بزرگ رو پیدا کنم
آی دی یا کلاس مورد نظر را مشاهده کنید , سپس درون فایل css به دنبالش بگردید
من که از سیستم مدیریت محتوا استفاده نمی کنم نمی تونم از این کد استفاده کنم؟
با تشکر
ربطی نداره داداش گلم , این پلاگین هست و بر روی html هم کار میکنه
سلام داداش.اگر میشه من رو داخل یاهو اد کنید.یک کار واجب دارم.ایدی:hamedazhamejor
عالی بود وری نایس