آموزش رایگان ساخت گالری تصاویر محصولات سایت دیجی کالا با Html | Css | Bootstrap | Jquery | Owlcarousel | Fancybox

آموزش رایگان و پروژه محور ساخت گالری تصاویر محصولات

گالری تصاویر محصول یکی از بخش‌های مهم صفحه محصوله که به کاربر کمک می‌کنه جزئیات کالا رو از زوایای مختلف ببینه. در این مینی پروژه قراره با HTML، CSS، Bootstrap و دو پلاگین Owl Carousel و Fancybox، یه گالری تصاویر مشابه دیجی کالا بسازیم.

گالری از یه اسلایدر اصلی تشکیل شده که تصاویر بزرگ محصول رو نمایش می‌ده. بالای اسلایدر، یه bage «پرفروش» با رنگ قرمز قرار گرفته که توجه کاربر رو جلب می‌کنه. کنار اسلایدر، دکمه‌های ناوبری قرار دارن که با فلش‌های چپ و راست، بین تصاویر جابه‌جا می‌شن.

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

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

برای اسلایدر اصلی از Owl Carousel استفاده شده. این پلاگین تنظیمات مختلفی داره که توی این پروژه، حالت راست‌چین و نمایش تک‌آیتمی براش فعال شده. بندانگشتی‌ها هم با پلاگین Thumbs به اسلایدر اصلی متصل شدن تا کلیک روی هر کدوم، اسلایدر رو به همون تصویر ببره.

تصاویر گالری با Fancybox هم لینک شدن. یعنی اگه کاربر روی تصویر اصلی کلیک کنه، تصویر توی سایز بزرگ‌تر و توی یه لایت‌باکس نمایش داده می‌شه. این قابلیت برای بررسی دقیق‌تر محصول ضروریه.

استایل‌دهی گالری با CSS سفارشی انجام شده. کادر گالری سفید با گوشه‌های گرد و سایه ملایمه، بندانگشتی‌ها اندازه یکسان دارن و دکمه‌های ناوبری به شکل دایره‌های کوچیک طراحی شدن. همه این‌ها باعث می‌شه گالری ظاهری تمیز و حرفه‌ای داشته باشه.

نکته کاربردی این پروژه، یادگیری اتصال اسلایدر و بندانگشتی‌ها به همدیگه‌ست. این هماهنگی بین اجزا باعث می‌شه کاربر تجربه روانی از مرور تصاویر داشته باشه.

در نهایت یه گالری تصاویر کامل داری که می‌تونی ازش در پروژه‌های شخصی خودت استفاده کنی. سورس کامل پروژه به صورت رایگان در دسترسه تا کدها رو بررسی کنی.

اگه می‌خوای این بخش‌ها رو در قالب یه پروژه فروشگاهی یکپارچه یاد بگیری، دوره طراحی سایت فروشگاهی دیجی کالا می‌تونه مسیر درستی باشه.