در این آموزش با استفاده از زبان جاوا اسکریپت، قصد ساخت و طراحی کتابخانه ذره‌بین را داریم تا در هنگام قرارگیری نشان‌گر ماوس بر روی نقطه مشخصی از عکس، افکت بزرگنمایی اعمال شود. ممکن است مشابه این کتابخانه را زیاد دیده باشید اما اینکه خود شما به عنوان یک برنامه‌نویس قادر به ساخت چنین افکتی باشید، بسیار حایز اهمیت است، پس با همراه باشید. توجه داشته باشید که تمام قسمت‌های این کتابخانه را از صفر و بدون استفاده از ( و یا دیگر تعلقات جاوا اسکریپت می‌سازیم، پس طبیعتا بسیار سبک و کم‌حجم خواهد بود. معمولا سایت‌های تجاری همچون و جزو بزرگ‌ترین طرفداران افکت ذره‌بین هستند. افکت ذره‌بین معمولا شامل گروهی از عکس‌های کوچک است که امکان بزرگنمایی و مشاهده جزییات آن‌ها در حالت (قرارگیری ماوس روی عکس) فراهم می‌شود. برای حفظ سادگی این آموزش، تنها قابلیت‌های اصلی را به این کتابخانه اضافه خواهیم کرد. از این رو، در کنار فایل ، تنها به یک فایل برای تنظیم عملکرد کتابخانه و همچنین به یک فایل برای زیبا‌سازی آن نیاز داریم. قبل از اینکه ساخت کتابخانه را شروع کنیم، نگاهی به عملکرد آن می‌اندازیم، زیرا ایده‌پردازی و جمع‌بندی قبل از شروع کار باعث می‌شود تا کدنویسی راحت‌تری داشته باشیم. از آنجایی که قرار است که این گالری را در قالب یک پلاگین بسازیم و کاربران بتوانند بدون مشکل از آن استفاده کنند، باید در همین شروع کار، یک پیکربندی منظم از بسازیم. این قسمت شامل یک برای قرارگیری عکس‌ها و همچنین یک خالی برای تنظیم بزرگنمایی است. همچنین خصوصیات و را نیز اضافه کرده‌ایم. کاربران در این قسمت می‌توانند هر تعداد عکس که نیاز دارند را به طرح بالا بیافزایند. توجه داشته باشید که هر عکس به کلاس پیوند خورده است و یک div خالی نیز با کلاس در پایین المنت اصلی وجود دارد. عملکرد این کتابخانه کاملا وابسته به جاوا اسکریپت است اما به هر حال، مقداری هم کار را زیبا می‌کند. امکان افزودن مستقیم فایل به با دستور زیر وجود دارد: حال که طرح پایه‌ای کتابخانه آماده شده است، به مقداردهی اولیه جاوا اسکریپت در فایل می‌پردازیم. افزودن فایل به کتابخانه باعث می‌شود تا آبجکت به صورت سراسری در دسترس باشد. این آبجکت تنها شامل یک متد برای مقداردهی اولیه پلاگین است و یک مقدار را به عنوان آدرس گالری دریافت می‌کند. به این صورت می‌توانیم چندین گالری مستقل را در یک صفحه مدیریت کنیم. زمانی که می‌خواهیم یک کتابخانه جاوا اسکریپت را طراحی کنیم، باید مطمین شویم که ( را به درستی ثبت کرده‌ایم. روش‌های مختلفی برای این کار وجود دارد که آسان‌ترین آن‌ها، استفاده از روش زیر است: قطعه کد بالا درون یک تابع ( پیچیده شده است. در این روش، کتابخانه به طور خودکار ثبت می‌شود و آبجکت با تمام متدهای خود در دسترس کاربران قرار خواهد گرفت. همانطور که در بالا گفتیم، کتابخانه تنها یک متد خواهد داشت و وظیفه آن انتخاب المنت‌های گالری و افزودن به آن‌هاست. ابتدا باید در صورت وجود المنت‌های مورد نظر، آن‌ها را انتخاب کنیم. همانطور که گفته شد، جی‌کویری در این آموزش کاربردی ندارد، پس باید به استفاده از روش‌های جاوا اسکریپت بومی و کار با تکیه کنیم. توجه داشته باشید که در خط آخر، منبع عکس مورد نظر را دریافت کرده و درون ( المنت بزرگنمایی قرار می‌دهیم. این عمل زمانی رخ می‌دهد که خوانده شود تا از خالی نبودن گالری اطمینان حاصل کنیم. همین عمل را برای کلیک روی پیش‌نمایش‌ها نیز تکرار می‌کنیم. بدین صورت کاربران قادر خواهند بود تا عکس مورد نظر خود را برای بزرگنمایی انتخاب کنند. عکسی که در معرض بزرگنمایی قرار گیرد، شامل چندین خواهد بود. اولین آن زمانی فعال می‌شود که نشان‌گر ماوس روی عکس قرار گیرد و باعث افزایش اندازه پس‌زمینه و بزرگنمایی عکس خواهد شد. از آنجایی که اندازه عکس بزرگ شده است. کاملا درون جا نمی‌شود و تنها مقداری از آن به نمایش در خواهد آمد. حال از کاربر می‌خواهیم تا مکان بزرگنمایی عکس را انتخاب کند. از این رو یک دیگر برای رهگیری اضافه می‌کنیم تا با استفاده از آن موقعیت پس‌زمینه را تغییر دهیم. زمانی که نشان‌گر ماوس از عکس مورد نظر خارج شود، باید به حالت پیش‌فرض برگردیم. این عمل به راحتی و با برگرداندن اندازه پس‌زمینه به حالت و موقعیت پس‌زمینه به انجام می‌شود. و با این قطعه کد، کار ما تمام می‌شود. این کتابخانه در تمام مروگرهای امروزی دسکتاپ به خوبی عمل می‌کند. البته ممکن است بعضی از خصوصیات در عملکرد خوبی در نسخه‌های قدیمی مرورگر IE نداشته باشند. مت سفانه افکت بزرگنمایی در دستگاه‌های لمسی به دلیل محدودیت صفحه‌نمایش و عدم وجود نشان‌گر، کاربرد خوبی نخواهد داشت. از این رو بهتر است شخصی‌سازی‌های لازم را در نسخه گوشی‌های هوشمند انجام دهید. البته لازم به ذکر است که در کتابخانه بالا، افکت بزرگنمایی برای گوشی‌های هوشمند غیرفعال شده است. این مقاله آموزشی نیز به پایان رسید، شما کاربران ، دیدگاه و سوالات خود در مورد این کتابخانه را می‌توانید در پایین همین مقاله با ما در میان بگذارید.