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

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

  • 7 شهریور 1397
  • بدون دیدگاه
  • مجید عابد
کد – نمایش دهنده ۳۶۰ درجه ای محصول

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

 

 

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

 

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

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

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

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

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

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

 

 

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

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

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

 

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

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

 

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

 
امتیاز شما به این مقاله ؟
خیلی بدبدمعمولیخوبخیلی عالی
1 رای : 4٫00 از 5

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