تیشرت اختصاصی برنامه نویس ها
خرید
اطلاعات بیشتر

آموزش ساده واکنش گرا کردن تصاویر با ResponsifyJs

طراحی وب مدرن ۱۰۰% باید ریسپانسیو یا همان واکنش گرا باشد و کتابخانه های زیادی به طور روز افزون انجام این کار را برای ما آسان می کنند.

با پلاگین های رایگانی مثل  ResponsifyJS امکان اینکه ما صفحات سایت خود را با همه دیوایس خا هماهنگ کنیم خیلی ساده تر میسر می شود. این پلاگین اول نگهدارنده(Container) عکس ها را می گیرد و سپس به طور اتوماتیک آنها را با توجه به سایز صفحه مرتب می کند.

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

پلاگین  ResponsifyJS دقیقا این مشکل را حل کرده است.این پلاگین می تواند به صورت اتوماتیک کار کند و برای دقیق تر شدن می توانید منطقه فوکوس را به آن بدهید تا آن منطقه همیشه دیده شود.

این مناطق فوکوس به صورت اعداد اعشاری (از ۰ تا ۱) باید داده شوند مثلا .۵ معادل ۵۰% است(یا چپ/راست یا بالا/پایین) .شاید مشخص کردن دستی این اعداد کمی سخت باشد ولی خوشبختانه یک نرم افزار ساده برای محاسبه این اعداد وجود دارد که می توانید موقعیت ها را در آن حساب کنید.

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

در همین رابطه :   10 پلاگین جدید و زیبای جی کوئری - گلچین 2012

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

منبع

دسته بندی : jQuery

پاسخ دهید

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

More in عكاسی
۳۲ عکس پرتره بسیار زیبا (سری سوم)

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

Close