اسلایدر ریسپانسیو با افکت موزاییک یا افکتی مشابه آن

[bftarane]

سلام.
من این اسلایدشو ریسپانسیو رو امتحان کردم
http://www.pixedelic.com/plugins/camera/
منتها من می خوام اسلایدشو رو در فضایی با ابعاد 670*250 نشون بدم بنابراین نمی خوام عکس‌هایی بزرگتر از این ابعاد داشته باشم (به خاطر سرعت)
عکس‌هایی که در خود اسلایدشو استفاده شده ابعادشون خیلی بزرگه و وقتی من عکس با ابعاد کوچکتر قرار می دم عکس ناقص دیده میشه یعنی یه قسمت از عکس دیده نمیشه.

راه حلی سراغ دارید؟ یا اسلایدشو ریسپانسیو دیگه ای با این خصوصیات سراغ دارید؟

ممنون. امروز واقعاً خیلی جستجو کردم برای این ولی به نتیجه نرسیدم.

[بهزاد علی محمدزاده]

سلام . آره حق داری که به نتیجه نرسی . این معضله در طراحی ریسپانسیو . بیشتر این اسلایدر ها و نمونه های ریسپانسیو به شدت روی Performance تاثیر منفی میذارن و اصلا مناسب نیستن . عکس های بزرگی رو استفاده می کنن که اگر صفحه نمایش بزرگ بود یا از نوع Retina بود تصویر به خوبی نمایش داده بشه . وقتی هم قراره کوچیک بشه همون عکس رو با تکنیک css یا jquery کوچیک می کنن . اما همچنان حجم عکس همونه و برای موبایل اصلا مناسب نیست .
من هم دارم روی این موضوع کار می کنم . هنوز به نتیجه خوبی که تست کرده باشم و همون عملکرد مورد نظر ما رو داشته باشه نرسیدم . کتابخانه های جاوااسکریپتی هستند که مطابق صفحه نمایش عکس مورد نظر و انتخاب می کنن . ولی لازمه اش اینه که شما از یه عکس چندین نسخه آپلود کنید . یکی برای صفحه نمایش های بزرگ و یکی هم برای تبلت و موبایل . اونوقت این کتابخانه تصویر رو انتخاب می کنه . لینک (https://github.com/scottjehl/picturefill)

کاری که شما می خواین انجام بدین احتمالا ساده تر باشه . چون من برای full screen می خواستم . داخل کدها رو نگاه کن ببین می تونی اندازه هاشو تغییر بدی یا نه . یا مستنداتش و نگاه کن .این (http://jquery-plugins.net/a-slider-responsive-slider-with-audio-support) رو هم یه نگاه بنداز .

[bftarane]

متشکر از پاسخ شما،
من لینک زیر رو پیدا کردم
http://iprodev.com/iview/index4.html
و با این مشکلم حل شد، یعنی الآن تصاویر رو به 250*670 resize کردم و در اسلایدر استفاده کردم
لینک‌هایی که گذاشتید رو هم امتحان می کنم.

وقتی هم قراره کوچیک بشه همون عکس رو با تکنیک css یا jquery کوچیک می کنن . اما همچنان حجم عکس همونه و برای موبایل اصلا مناسب نیست .
ممنون از این تذکر، اصلاً حواسم به این نبود که حتی یه عکس مثلاً 250*670 ممکنه برای موبایل بزرگ و سنگین باشه. باید در این مورد بیشتر بررسی کنم.

[بهزاد علی محمدزاده]

من هم دارم تحقیق می کنم . که به یه سری best practice های تست شده برسم. وقتی شروع کردم به جمع آوری منابع و کنفرانس ها در مورد موبایل و ریسپانسیو برام سوال بود که چرا این روش طراحی خیلی منبع در موردش نیست و زیاد بهش پرداخته نشده . یکی از دلایلش همین Performance هست . که این نوع طراحی برای هر پروژه ایی مناسب نیست . صفحه سایت اولین همایش تخصصی ریسپانسیو (http://conf.wsschool.org/rwd/)ببینید . عکس سخنران ها حدود 500 کیلو بایت حجم دارن ! یعنی اگر بخوایم به این صفحه چند تا کتابخانه مثل جی کویری هم اضافه کنیم تقریبا 1MB حجم همین صفحه میشه !!! . هر کدام از عکس ها حدود 500 پیکسل عرض و ارتفاع دارن ! و خودشون هم در همایش به این موضوع اشاره می کنن . خب این برنامه وب تک صفحه ایی هست که هیچ محتوا خاصی نداره . حالا فکر کن این مثلا بشه یه خبرگذاری با آلبوم عکس و ... دیگه ریسپانسیو جواب نمیده .

اگر بررسی نکنی و از ریسپانسیو استفاده کنی فقط شاید دلت خوش باشه به اینکه مرورگر و تغییر اندازه بدی صفحه تغییر کنه ! ولی ممکنه کاربران به سختی از سایت بازدید کنن !