PHP-project/poojaex.php at main · davearyan81/PHP-project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<?php
include('includes/header.php');
include('includes/navbar.php');
?>

<!DOCTYPE html>
<html>

<head>

    <style type="text/css">

    </style>
</head>

<body>
    <div class="product-images">
        <img src="image\natrajan.jpg" alt="Product Image" class="active">
        <img src="image\natrajan2.png" alt="Product Image">
        <img src="image\natrajan2.png" alt="Product Image">
    </div>
    <div class="product-thumbnails">
        <img src="image1.jpg" alt="Product Image" class="active-thumbnail">
        <img src="image2.jpg" alt="Product Image" class="thumbnail">
        <img src="image3.jpg" alt="Product Image" class="thumbnail">
    </div>
    <script type="text/javascript">
        const images = document.querySelectorAll('.product-images img');
        const thumbnails = document.querySelectorAll('.product-thumbnails img');

        thumbnails.forEach((thumbnail, index) => {
            thumbnail.addEventListener('click', () => {
                images.forEach(image => image.classList.remove('active'));
                thumbnails.forEach(thumbnail => thumbnail.classList.remove('active-thumbnail'));
                images[index].classList.add('active');
                thumbnail.classList.add('active-thumbnail');
            });
        });
    </script>
</body>

</html>
<?php
include('includes/footer.php');
include('includes/scripts.php');
?>