نویسنده : مجتبی عرفان راد
تاریخ انتشار : ۱۷ اردیبهشت ۱۳۹۵
تعداد دیدگاه ها :
هیچ دیدگاهی ثبت نشده
لینک کوتاه مطلب : http://wmer.ir/?p=1095
آمار بازدید : 1625 بازدید
فرمت : ZIP
حجم : 126.31 KB
منبع : CodyHouse
دانلود سورس

نمایش 360 درجه محصول در وب


سلامی دوباره خدمت شما هواداران عزیز،

امروز براتون یه سورس عالی گذاشتم که میتونید با این سورس به طور 360 درجه محصولتون رو نمایش بدید.

اگه کد های JS رو ببینید میبینید که جدا چیز خاصی نداره و فقط ایده مهم بوده 😀 که تنها کاری که باید بکنید اینه که از دور تا دور محصولتون عکس بگیرید و فقط لینک بدید.

شما میتونید از بخش نمایش نمونه ببینید که چه چیز جالبیه.

ساخت پایه صفحه

بخش HTML یا همون پایه صفحه شامل دو DIV اصلی میشه یکی figure.product-viewer برای بخش عکسمون و یکی div.cd-product-viewer-handle برای چرخوندن عکسی که قراره نمایش بدیم.

قسمت data-frame در div.cd-product-viewer-wrapper تعداد عکس هایی هست که قراره توی وبسایت نمایش بدیم در حالی که data-friction مقدار اختلاف رو نمایش میده ( این قسمت نباید کمتر از 0 باشه ).

اضافه کردن استایل

تگ <img> فقط وقتی که صفحه داره لود میشه نمایش داده میشه, و فقط برای خالی نماندن بخش figure.product-viewer قرار گرفته است.

و قسمت div.product-sprite, position این قسمت  absolute است و height و width این قسمت به ترتیب 100% و 1600% است, ( چون این قسمت 16 فریم داره ) و hidden است به طور پیشفرض. بخش .loaded بعدا برای نمایش در بخش div.product-sprite وقتی که تمامی عکس ها لود شدند:

,وقتی که کاربر span.handle یا عکس محصول را تکان میدهد , ما در بخش div.product-sprite  مقدار translateX برای نمایش بک فرم دیگر ( با استفاده از JavaScript ).

افکت لود شدن صفحه دسته بندی شده با عوض کردن مفدار scaleX قسمت span.fill ( با استفاده از JavaScript ); وقتی که بخش عکس کامل لود شد, بخش span.fill hidden میشود و  span.handle نمایش داده میشود:

بخش Event handler ها

برای اجرای نمایش محصول ما باید, productViewer رو بسازم و استفاده کنیم از متود loadFrames تا ببینیم که عکس ها لود شده یا نه:

وقتی که بخش عکس ها کامل لود شد, ما یک event handler برای event قسمت mousedown/mousemove/mouseup اضافه میکنیم تا قسمت های دیگر مناسب شود :

برای اینکه پشتبانی کنه دستگاه های لمسی رو , ما از event بخش vmousedown/vmousemove/vmouseup استفاده کردیم که توسط jQuery mobile framework ساخته شده است.

امیدوارم توضیحات کامل باشه و استفاده کافی رو برده باشید.

نظر یادتون نره

موفق باشد 😉

نمایش 360 درجه محصول در وب


سلامی دوباره خدمت شما هواداران عزیز،

امروز براتون یه سورس عالی گذاشتم که میتونید با این سورس به طور 360 درجه محصولتون رو نمایش بدید.

اگه کد های JS رو ببینید میبینید که جدا چیز خاصی نداره و فقط ایده مهم بوده 😀 که تنها کاری که باید بکنید اینه که از دور تا دور محصولتون عکس بگیرید و فقط لینک بدید.

شما میتونید از بخش نمایش نمونه ببینید که چه چیز جالبیه.

ساخت پایه صفحه

بخش HTML یا همون پایه صفحه شامل دو DIV اصلی میشه یکی figure.product-viewer برای بخش عکسمون و یکی div.cd-product-viewer-handle برای چرخوندن عکسی که قراره نمایش بدیم.

قسمت data-frame در div.cd-product-viewer-wrapper تعداد عکس هایی هست که قراره توی وبسایت نمایش بدیم در حالی که data-friction مقدار اختلاف رو نمایش میده ( این قسمت نباید کمتر از 0 باشه ).

اضافه کردن استایل

تگ <img> فقط وقتی که صفحه داره لود میشه نمایش داده میشه, و فقط برای خالی نماندن بخش figure.product-viewer قرار گرفته است.

و قسمت div.product-sprite, position این قسمت  absolute است و height و width این قسمت به ترتیب 100% و 1600% است, ( چون این قسمت 16 فریم داره ) و hidden است به طور پیشفرض. بخش .loaded بعدا برای نمایش در بخش div.product-sprite وقتی که تمامی عکس ها لود شدند:

,وقتی که کاربر span.handle یا عکس محصول را تکان میدهد , ما در بخش div.product-sprite  مقدار translateX برای نمایش بک فرم دیگر ( با استفاده از JavaScript ).

افکت لود شدن صفحه دسته بندی شده با عوض کردن مفدار scaleX قسمت span.fill ( با استفاده از JavaScript ); وقتی که بخش عکس کامل لود شد, بخش span.fill hidden میشود و  span.handle نمایش داده میشود:

بخش Event handler ها

برای اجرای نمایش محصول ما باید, productViewer رو بسازم و استفاده کنیم از متود loadFrames تا ببینیم که عکس ها لود شده یا نه:

وقتی که بخش عکس ها کامل لود شد, ما یک event handler برای event قسمت mousedown/mousemove/mouseup اضافه میکنیم تا قسمت های دیگر مناسب شود :

برای اینکه پشتبانی کنه دستگاه های لمسی رو , ما از event بخش vmousedown/vmousemove/vmouseup استفاده کردیم که توسط jQuery mobile framework ساخته شده است.

امیدوارم توضیحات کامل باشه و استفاده کافی رو برده باشید.

نظر یادتون نره

موفق باشد 😉

مطالب پربازدید

مطالب تصادفی

twiter facebook google plus instagram