درخواست پیش فاکتور

کد – نمایش دهنده ۳۶۰ درجه ای محصول

  • ۷ شهریور ۱۳۹۷
  • 223 نفر
  • بدون دیدگاه
  • مجید عابد
 
1 Star2 Stars3 Stars4 Stars5 Stars

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

امروز براتون آموزشی آماده کرده ایم که با استفاده از آن بتوانید نمایش دهنده ۳۶۰ درجه ای محصول اضافه کنید . هدف امروز فروشگاه های اینترنتی پر کردن فضای خالی بین کاربر و محصول موجود در فروشگاه اینترنتی است . اگر کاربر بتواند محصول را از تمامی زوایا بررسی کند و حس ملموسی نسبت به آن پیدا کند صد در صد میتواند با اطمینان خاطر بیشتری نسبت به خرید آن اقدام نماید . این آموزش میتواند کمک زیادی به دارندگان فروشگاه های اینترنتی و طراحان سایت کند .

 

 

دمو نمایش دهنده ۳۶۰ درجه ای محصول

 

نمایش دهنده ۳۶۰ درجه ای محصول

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

ویژگی data-frame از خصوصیت div.cd-product-viewer-wrapper تعداد فریم های تصویر در هر چرخش را مشخص میکند در حالی که data-friction میزان اصطکاک در هنگام کشیدن تصویر و ماوس را مشخص میکند (باید بیشتر از ۰ باشد ) .

افزودن استایل

المان <img> تنها در ابتدا نمایان است . در حالی که تکه های تصویر هنوز در حال لود شدن هستند . همچنین با استفاده از المان figure.product-viewer برای دادن ابعاد مناسب به تصویر کمک میکند .

زمانی که کاربر تصویر محصول را میکشد یا اصطلاحا دراگ میکند ، ما مقدار translateX  از div.product-sprite را برای نمایش فریم متفاوتی از تصویر استفاده میکنیم ( با استفاده از جاوا اسکریپت ) .

 

 

هندل کردن رویدادها

برای پیاده سازی نمایش دهنده محصول ، ما یک شی productViewer ایجاد کرده و از متد loadFrames برای بررسی تکه های تصویری که باید لود شود استفاده کرده ایم .

زمانی که تکه های تصویر لود شد ، ما از هندل کننده رویدادهای mousedown/mousemove/mouseup برای بررسی رویدادها استفاده میکنیم .

 

برای انجام این کار در دستگاه های لمسی ما از رویدادهای vmousedown/vmousemove/vmouseup موجود در جیکوئری موبایل استفاده کرده ایم .

امیدوارم که از آموزش نمایش دهنده ۳۶۰ درجه ای محصول استفاده کافی برده باشید . در صورتی که بخواهید دمو و کدهای کامل این پروژه را مشاهده کنید میتوانید به لینک های موجود در پایین مطلب مراجعه کنید .

 

منبع : https://codyhouse.co

 

دکتر رنک لول رنگ - پالت رنگ های مورد تایید آی وحید درگاه پرداخت واسط jibme