طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

ساخت اسلایدر گالری محصولات با jQuery


ساخت اسلایدر گالری محصولات با jQuery

در سایت های فروشگاهی, گالری محصولات یک رابط کلیدی برای نمایش محصولات فروشگاه آنلاین است.بسیاری از اپلیکیشن های فروشگاهی صفحات گالری زیبایی برای نمایش حداکثر تصاویر محصولات را دارند.

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

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

خروجی این مثال ما یک اسلایدشو ریسپانسیو خواهد بود. گالری و اسلایدشو تصاویر محصول بر اساس سایز دیوایس تغییر می کند.

 

در این مثال, ما نتایج گالری محصول را بصورت داینامیک از دیتابیس MySQL می خوانیم. با کلیک بر روی هر یک از تصاویر اسلایدشو آن به همراه عنوانی که در نظر گرفتیم نمایش داده می شود.

رابط کاربری گالری محصول

این کد HTML شامل کد PHP نیز برای دریافت نتایج از دیتابیس و نمایش نتایج آن است.

هر یک از آیتم های گالری شامل سلکتور کلاس CSS است که با آن رویداد کلیک jQuery هندل می شود.

اسلایدر گالری محصولات با jQuery

من از اسکریپت jQuery زیر و CSS برای پیاده سازی مثال ساخت اسلایدر گالری محصولات با jQuery استفاده کردم.

در این کد, رویداد کلیک المنت گالری برای شروع اسلایدشو هندل شده است. با کلیک روی تصویر, اسلایدشو از آن اسلاید شروع به حرکت می کند.اسلایدشو ما دارای کنترل های ناوبری به همراه سلکتورهایی به منظور جابجایی بین اسلایدها هستند.

حتما بخوانید  افزودن و حذف تصویر با AJAX در جی کوئری

تابع galleryNavigate برای انتقال اسلایدها به عقب و جلو استفاده شده است. این تابع رو پارامتر gData و direction را دریافت می کند.

مسیر فایل تصویر و عنوان به gData اضافه می شوند. مقادیر احتمالی direction نیز left و right است.

Main.js

style.css

جدول دیتابیس محصولات

کد SQL زیر جدول محصولات فروشگاه به همراه چندین مقدار پیش فرض را نشان می دهد.

حتما بخوانید  Crop کردن تصویر با php و jquery (برش عکس)

خروجی – ساخت اسلایدر گالری محصولات با jQuery

اسکرین شات زیر به شما خروجی ایجاد اسلایدر محصولات به همراه افکت lightbox جی کویری را نشان می دهد.

ساخت اسلایدر گالری محصولات با jQuery

امیدوارم از آموزش ساخت اسلایدر گالری محصولات استفاده مفید را برده باشید.

برای دانلود سورس کد از باکس دانلود زیر استفاده کنید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید.

اگر مفید بود, لطفا به اشترک بگذارید تا دوستان دیگر نیز بهره ببرند

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

دیدگاه کاربران

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

آموزش طراحی وب سایت

نظر کاربران عزیز

آموزش های آنلاین در چه زمینه ای تهیه کنیم ؟

  • آموزش جاوااسکریپت و جی کوئری (45%, 10)
  • آموزش ساخت ربات تلگرام (45%, 10)
  • آموزش بوت استرپ 4 (9%, 2)

تعداد رای ها : 22

Loading ... Loading ...

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

مجوزهای ما


logo-samandehi نماد اعتماد الکترونیک

دانلود کتاب

عضویت در خبرنامه