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

- visibility ۵ mode_comment

به نام خدا

با سلام خدمت همه ی دوستان سون لرنی؛عید رو پیشاپیش بهتون تبریک میگم.امروز با آموزش زوم تصاویر همراهتون هستم.اگه یه سرچ گوگل انجام بدید میبینید که پلاگین های جی کوئری بسیاری برای زوم تصاویر نوشته شده ، که برخی از اونها خیلی پیچیده هستند.

در این آموزش ما میخواهیم یک پلاگین جی کوئری ساده برای زوم تصاویر بنویسیم.ابتدا دمو رو ببینید بعد بریم سراغ کد ها.

info نکته :

لازمه ی یادگیری : آشنا بودن با متد های جی کوئری

میتونید به آموزش نوشتن افزونه جی کوئری هم سری بزنید.

روش کلی : ابتدا تگ های img رو داخل divی با کلاس "wrap-img-zoom" قرار میدیم.وقتی روی اون div هاور شد، بزرگنمایی عکس داخلش رو 2 قرار میدیم و مکان موس رو روی اون div به دست میاریم. به اون div استایل : رو میدیم تا عکسی که از اطراف دیو زده بیرون نشون داد نشه.هر وقت که موس روی دیو حرکت کرد ، مکان تصویر رو با توجه به مکان موس تغییر میدیم.

info نکته :

چون از خاصیت scale سی اس اس استفاده کردیم، پلاگین jquery.transit رو هم به صفحه مون متصل میکنیم تا کارمون آسون تر بشه

HTML:

CSS:

 

jQuery:

توضیح: از خط 1 تا 34 ، ما یک پلاگین برای جی کوئری نوشتیم که در خط 3 اسم اون رو (zoomImg) تعریف کردیم.بعد هم دو متغیر تعریف کردیم که متغیر اولی زمان اجرای انیمیشن ها و دومی مقدار بزرگنمایی عکس رو در خودش نگه میداره.

خط 6 یکی از مهم ترین قسمت هر پلاگین جی کوئری هست که ما گفتیم به تعداد المنت هایی که انتخاب شده است ، کد های داخل متد ()each رو برگردون.

بعد هم در خطوط 7،8،9 سه متغیر تعریف کردیم که مقادیر عرض و ارتفاع المنت انتخاب شده رو میگیره.

در خط 11 تا 13 ما المنت انتخاب شده رو (همون تصویری که میخواهیم روش زوم بشه) داخل یک دیو با کلاس wrap-img-zoom میندازیم و اندازه ی اون دیو رو برابر اندازه ی تصویر قرار میدیم.

اگر اسکریپت ما اجرا بشه، تا اینجا کد های HTML مون بدین صورت خواهد بود :

در خط 15 تا 17 سه تا متغیر تعریف میکنیم که متغیر اولی والد المنت انتخاب شده ( یعنی div.wrap-img-zoom) رو میگیره و متغیر offset رو هم تعریف کردیم تا در پایین تر ازش استفاده کنیم.متغیر $img هم تصویر داخل دیو(div.wrap-img-zoom img) رو میگیره.

حالا میریم سراغ رویداد ها.برای اینکه کارمون ساده بشه و کدمون هم ظاهر بهتری داشته باشه از متد ()on با پارامتر های mouseOver ( یا همون هاور) ، mouseMove( حرکت موس) و mouseLeave (ترک کردن موس) استفاده میکنیم.

در خط 19 گفتیم که وقتی موس روی دیو رفت،بزرگنمایی تصویر داخلش 2 برابر بشه( ما در اینجا با استفاده از پلاگین jquery.transit خاصیت بزرگنمایی رو تغییر دادیم.دقت داشته باشید که وقتی پلاگین jquery.transit استفاده میکنید، میتونید از پارامتر های متد transition ، داخل متد های css و animate نیز استفاده کنید.)

مهم ترین قسمت این کد ، خط 24 تا 26 هست .در خط 24 و 25 ما دو متغیر sTop (مخفف offsetTop)  و sLeft  رو تعریف کردیم که نصف قرینه ی مقدار فاصله ی موس از بالا و پایین دیو  رو میگیرن.

چطوری؟؟! خب باید بگم که e.pageY فاصله موس از بالای صفحه و offset.top ( که همون wrap.offset().top$ هست)، فاصله ی بالای دیو از صفحه رو میگیره  که تفاضل این دو ، مقدار فاصله ی موس از بالای دیو رو به دست میاره.

حالا چرا تقسیم بر دو کردیم؟؟! ما با این کار تصویر رو به یک محور مختصات تبدیل کردیم که تصویر رو (فرضا) به چهار قسمت تقسیم کردیم. یعنی پوزیشن نقطه ی وسط تصویر برابر : میباشد.

چرا قرینه؟؟ اگه مقدار قرینه رو بدست نمیاوردیم چی میشد؟جواب: با بالا رفتن موس ، تصویر بالا میرفت و با چپ و راست رفتن موس ، تصویر نیز به چپ و راست میرفت که این مد نظر ما نیست.

و سوال آخر : چرا ضرب در 1.2 ؟ اگه این کارو نکنیم چی میشه به نظرتون؟؟ جواب : وقتی کاربر موس شو میاره گوشه ی تصویر که در حالت زوم اون گوشه رو ببینه، یهو موس از رو دایو میره کنار و کاربر نمیتونه در حالت زوم کنار تصویر رو ببینه. برای این مقدار به دست آمده را  ضرب در 1.2 میکنیم که یه مقدار تصویر بیشتر به هر طرف بره که راحت بشه گوشه هاشو در حالت زوم دید.

در خط 26 این مقادیر به دست آورده رو با متد animate به عکس میدیم.

وقتی در خط 30 هم گفتیم که وقتی موس ، دیو رو ترک میکنه ، بزرگنمایی تصویر برابر 1 و پوزیشنش هم برابر top:0px و left :0px بشه.یعنی تصویر برگرده به حالت اولش.

در خط 38 هم از این پلاگینی که نوشتیم روی تگ img با دیتای استفاده میکنیم.

خسته نباشید؛ کار تموم شد.حالا دوباره یه نگاه به دمو بندازید و اگه خواستین سورس کد رو هم دانلود کنید.

 

امید وارم این آموزش هم برای شما مفید بوده باشه.

در پناه حق باشید؛ یا علی

 

comment دیدگاه کاربران
حامد مودی

واقعاً جالبه

nader70

عالی بود.
در internet explorer وقتی به گوشه چپ تصویر میایم تصویر از کادر خارج میشه

علی امینی

ممنون.ورژن چندش؟

nader70

فرق نمی کنه اگه پنجره را کوچک کنید این حالت پیش میاد چه در کروم چه در وب بروس های دیگه

علی امینی

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.