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

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

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

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

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

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

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

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

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

<?php
include 'DBController.php';
$db_handle = new DBController();
?>
<!doctype html>
<html lang="en">

<head>
<title>eCommerce Software Product Gallery Slideshow with jQuery Lightbox</title>
</head>
<body>
    <div class="container py-4">
        <h1>eCommerce Software Product Gallery Slideshow with jQuery
            Lightbox</h1>
        <div>
            <!-- gallery class need for using gallery -->
            <div class="gallery">
                <!-- need a div for contains img tag -->
          <?php
        $query = $db_handle->runQuery("SELECT * FROM tbl_products ORDER BY id ASC");
        if (! empty($query)) {
            foreach ($query as $key => $value) {
                ?> 
          <div class="galleryItem">
                    <img
                        src="<?php echo $query[$key]["product_image"] ; ?>"
                        data-text="<?php echo $query[$key]["name"] ; ?>">
                </div>
          <?php
            }
        }
        ?>
        </div>
        </div>
    </div>
    <div class="galleryShadow"></div>
    <div class="galleryModal">
        <i class="galleryIcon gIquit close"></i> <i
            class="galleryIcon gIleft nav-left"></i> <i
            class="galleryIcon gIright nav-right"></i>
        <div class="galleryContainer">
            <img src="">
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- Main JS -->
    <script src="assets/js/main.js"></script>
</body>
</html>

<?php

include 'DBController.php';

$db_handle = new DBController();

<!doctype html>

<head>

<title>eCommerce Software Product Gallery Slideshow with jQuery Lightbox</title>

</head>

<body>

<h1>eCommerce Software Product Gallery Slideshow with jQuery

Lightbox</h1>

<div>

<?php

$query = $db_handle->runQuery("SELECT * FROM tbl_products ORDER BY id ASC");

if (! empty($query)) {

foreach ($query as $key => $value) {

<img

src="<?php echo $query[$key]["product_image"] ; ?>"

data-text="<?php echo $query[$key]["name"] ; ?>">

</div>

<?php

}

</div>

<i class="galleryIcon gIquit close"></i> <i

class="galleryIcon gIleft nav-left"></i> <i

class="galleryIcon gIright nav-right"></i>

</div>

</body>

</html>

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

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

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

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

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

Main.js

$(function () {
    $('.gIquit').click(function () {
        $('.galleryModal').css({ 'transform': 'scale(0)' })
        $('.galleryShadow').fadeOut()
    })
    $('.gallery').on('click', '.galleryItem', function () {
        galleryNavigate($(this), 'opened')
        $('.galleryModal').css({ 'transform': 'scale(1)' })
        $('.galleryShadow').fadeIn()
    })
    let galleryNav
    let galleryNew
    let galleryNewImg
    let galleryNewText
    $('.gIleft').click(function () {
        galleryNew = $(galleryNav).prev()
        galleryNavigate(galleryNew, 'last')
    })
    $('.gIright').click(function () {
        galleryNew = $(galleryNav).next()
        galleryNavigate(galleryNew, 'first')
    })
    function galleryNavigate(gData, direction) {
        galleryNewImg = gData.children('img').attr('src')
        if (typeof galleryNewImg !== "undefined") {
            galleryNav = gData
            $('.galleryModal img').attr('src', galleryNewImg)
        }
        else {
            gData = $('.galleryItem:' + direction)
            galleryNav = gData
            galleryNewImg = gData.children('img').attr('src')
            $('.galleryModal img').attr('src', galleryNewImg)
        }
        galleryNewText = gData.children('img').attr('data-text')
        if (typeof galleryNewText !== "undefined") {
            $('.galleryModal .galleryContainer .galleryText').remove()
            $('.galleryModal .galleryContainer').append('<div class="galleryText">' + galleryNewText + '</div>')
        }
        else {
            $('.galleryModal .galleryContainer .galleryText').remove()
        }
    }
})

$(function () {

$('.gIquit').click(function () {

$('.galleryModal').css({ 'transform': 'scale(0)' })

$('.galleryShadow').fadeOut()

})

$('.gallery').on('click', '.galleryItem', function () {

galleryNavigate($(this), 'opened')

$('.galleryModal').css({ 'transform': 'scale(1)' })

$('.galleryShadow').fadeIn()

})

let galleryNav

let galleryNew

let galleryNewImg

let galleryNewText

$('.gIleft').click(function () {

galleryNew = $(galleryNav).prev()

galleryNavigate(galleryNew, 'last')

})

$('.gIright').click(function () {

galleryNew = $(galleryNav).next()

galleryNavigate(galleryNew, 'first')

})

function galleryNavigate(gData, direction) {

galleryNewImg = gData.children('img').attr('src')

if (typeof galleryNewImg !== "undefined") {

galleryNav = gData

$('.galleryModal img').attr('src', galleryNewImg)

}

else {

gData = $('.galleryItem:' + direction)

galleryNav = gData

galleryNewImg = gData.children('img').attr('src')

$('.galleryModal img').attr('src', galleryNewImg)

}

galleryNewText = gData.children('img').attr('data-text')

if (typeof galleryNewText !== "undefined") {

$('.galleryModal .galleryContainer .galleryText').remove()

$('.galleryModal .galleryContainer').append('<div class="galleryText">' + galleryNewText + '</div>')

}

else {

$('.galleryModal .galleryContainer .galleryText').remove()

}

})

style.css

.gallery .card {
  cursor: pointer;
}

.galleryShadow {
  display: none;
  -webkit-transition: ease all .5s;
  transition: ease all .5s;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
}

.galleryModal {
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: ease all .5s;
  transition: ease all .5s;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.galleryModal .galleryContainer {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
}

.galleryModal .galleryContainer img {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  border: 10px solid #fff;
  border-radius: 10px;
}

.galleryModal .galleryContainer .galleryText {
  position: absolute;
  width: 100%;
  height: auto;
  top: 100%;
  color: #fff;
  text-align: center;
  font-size: 1.5em;
}

.galleryModal .galleryIcon {
  position: absolute;
  font-size: 2rem;
  width: 4rem;
  height: 4rem;
  text-align: center;
  color: #fff;
}

.galleryModal .gIquit {
  right: 10px;
  top: 10px;
}

.galleryModal .gIleft {
  top: 50%;
  left: 10px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.galleryModal .gIright {
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.close {
    background: url("../icons/icon-close.png") no-repeat;
    cursor: pointer;
}
.nav-left {
    background: url("../icons/icon-left.png") no-repeat;
    cursor: pointer;
}
.nav-right {
    background: url("../icons/icon-right.png") no-repeat;
    cursor: pointer;
}

.gallery .card {

cursor: pointer;

}

.galleryShadow {

display: none;

-webkit-transition: ease all .5s;

transition: ease all .5s;

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100vh;

background-color: rgba(0, 0, 0, 0.9);

}

.galleryModal {

-webkit-transform: scale(0);

transform: scale(0);

-webkit-transition: ease all .5s;

transition: ease all .5s;

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100vh;

}

.galleryModal .galleryContainer {

position: absolute;

left: 50%;

top: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

width: 80%;

height: 80%;

}

.galleryModal .galleryContainer img {

position: absolute;

left: 50%;

top: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

max-width: 100%;

max-height: 100%;

border: 10px solid #fff;

border-radius: 10px;

}

.galleryModal .galleryContainer .galleryText {

position: absolute;

width: 100%;

height: auto;

top: 100%;

color: #fff;

text-align: center;

font-size: 1.5em;

}

.galleryModal .galleryIcon {

position: absolute;

font-size: 2rem;

width: 4rem;

height: 4rem;

text-align: center;

color: #fff;

}

.galleryModal .gIquit {

right: 10px;

top: 10px;

}

.galleryModal .gIleft {

top: 50%;

left: 10px;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

}

.galleryModal .gIright {

top: 50%;

right: 10px;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

}

.close {

background: url("../icons/icon-close.png") no-repeat;

cursor: pointer;

}

.nav-left {

background: url("../icons/icon-left.png") no-repeat;

cursor: pointer;

}

.nav-right {

background: url("../icons/icon-right.png") no-repeat;

cursor: pointer;

}

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

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

--
-- Table structure for table `tbl_products`
--

CREATE TABLE `tbl_products` (
  `id` int(8) NOT NULL,
  `name` varchar(255) NOT NULL,
  `price` double(10,2) NOT NULL,
  `category` varchar(255) NOT NULL,
  `product_image` text NOT NULL,
  `average_rating` float(3,1) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tbl_products`
--

INSERT INTO `tbl_products` (`id`, `name`, `price`, `category`, `product_image`, `average_rating`) VALUES
(1, 'Tiny Handbags', 100.00, 'Fashion', 'gallery/handbag.jpeg', 5.0),
(2, 'Men\'s Watch', 300.00, 'Generic', 'gallery/watch.jpeg', 4.0),
(3, 'Trendy Watch', 550.00, 'Generic', 'gallery/trendy-watch.jpeg', 4.0),
(4, 'Travel Bag', 820.00, 'Travel', 'gallery/travel-bag.jpeg', 5.0),
(5, 'Plastic Ducklings', 200.00, 'Toys', 'gallery/ducklings.jpeg', 4.0),
(6, 'Wooden Dolls', 290.00, 'Toys', 'gallery/wooden-dolls.jpeg', 5.0),
(7, 'Advanced Camera', 600.00, 'Gadget', 'gallery/camera.jpeg', 4.0),
(8, 'Jewel Box', 180.00, 'Fashion', 'gallery/jewel-box.jpeg', 5.0),
(9, 'Perl Jewellery', 940.00, 'Fashion', 'gallery/perls.jpeg', 5.0);

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_products`
--
ALTER TABLE `tbl_products`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_products`
--
ALTER TABLE `tbl_products`
  MODIFY `id` int(8) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=10;
COMMIT;

-- Table structure for table `tbl_products`

CREATE TABLE `tbl_products` (

`id` int(8) NOT NULL,

`name` varchar(255) NOT NULL,

`price` double(10,2) NOT NULL,

`category` varchar(255) NOT NULL,

`product_image` text NOT NULL,

`average_rating` float(3,1) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- Dumping data for table `tbl_products`

INSERT INTO `tbl_products` (`id`, `name`, `price`, `category`, `product_image`, `average_rating`) VALUES

(1, 'Tiny Handbags', 100.00, 'Fashion', 'gallery/handbag.jpeg', 5.0),

(2, 'Men\'s Watch', 300.00, 'Generic', 'gallery/watch.jpeg', 4.0),

(3, 'Trendy Watch', 550.00, 'Generic', 'gallery/trendy-watch.jpeg', 4.0),

(4, 'Travel Bag', 820.00, 'Travel', 'gallery/travel-bag.jpeg', 5.0),

(5, 'Plastic Ducklings', 200.00, 'Toys', 'gallery/ducklings.jpeg', 4.0),

(6, 'Wooden Dolls', 290.00, 'Toys', 'gallery/wooden-dolls.jpeg', 5.0),

(7, 'Advanced Camera', 600.00, 'Gadget', 'gallery/camera.jpeg', 4.0),

(8, 'Jewel Box', 180.00, 'Fashion', 'gallery/jewel-box.jpeg', 5.0),

(9, 'Perl Jewellery', 940.00, 'Fashion', 'gallery/perls.jpeg', 5.0);

-- Indexes for dumped tables

-- Indexes for table `tbl_products`

ALTER TABLE `tbl_products`

ADD PRIMARY KEY (`id`);

-- AUTO_INCREMENT for dumped tables

-- AUTO_INCREMENT for table `tbl_products`

ALTER TABLE `tbl_products`

MODIFY `id` int(8) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=10;

COMMIT;

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

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

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

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

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

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

لغو پاسخ

پوریا ۲۸ مرداد ۱۳۹۹

سلام
ممنون از آموزش های مفیدتون. بنده به راهنمایی شما نیاز دارم.
بنده با php تازه آشنا شدم و مبتدی هستم، تو صفحه جزئیات محصولم، مثل دیجی کالا یک بخش مربوط به تصاویر محصول دارم که از طریق دیتابس برای هر عکس یک ردیف یا ستون ایجاد کردم و راحت میتونم عکس ها رو از طریق دیتابیس اضافه کنم ولی نمیدونم در CMS با چه روشی میتونم برای هر ستون عکس جدا بفرستم. ممنون میشم راهنمایی کنید.

پاسخ

حسن شفیعی ۲۸ مرداد ۱۳۹۹

سلام.
بهتره هنگام ذخیره کل تصاویر رو داخل یک آرایه بریزید و بعد اونرو با تابع serialize() کد کنید و داخل ستون موردنظر ذخیره کنید و بعد داخل صفحه محصول اون رو فراخونی و بعد با unserialize() بصورت یک آرایه دربیارید و بعد داخل یک حلقه foreach تکرار کنید تا هر تصویر رو جداگانه نمایش بدید.
موفق باشید.

پاسخ

پوریا ۲۸ مرداد ۱۳۹۹

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

پاسخ

علی :| ۱۴ تیر ۱۳۹۸

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

پاسخ

حسن شفیعی ۱۴ تیر ۱۳۹۸

سلام. چون از قبل dom فراخوانی شده و با ajax داده جدیدی اضافه می کنید, این داده جدید داخل dom نیست و شناسایی نمیشه. باید مفهوم delegate رو یاد و پیاده کنید. در یکی از نظرات سایت توضیح داده بودم. باید در گوگل جستجو کنید.
موفق باشید.

پاسخ

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

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

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

Main.js

style.css

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

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

دانـلود باکــس

ساخت اسلایدر تصاویر با jQuery به همراه آپلود فایل چندگانه با PHP

ساخت اسلایدشو ریسپانسیو با jQuery

ساخت Carousel با jQuery

ساخت اسلایدر Parallax در جی کوئری

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه