زوم تصاویر

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

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

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

آموزش :

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

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

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

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

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

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

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

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

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

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

دموی پلاگین

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

پخش اختصاصی

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

0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

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

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