如何在不重新加载页面的情况下动态交换图像

Question

I want to create a scroll horizontal for my product page, I have done it in the past, so i have an idea on how to proceed, but this time I want the image clicked to be a bigger size for example 600x600 while all the other images on the bottom of that one with the size 100x100. Have an arrow left right on the side of the big image, and if the arrow is pressed left/right swap that big picture with the previous/next one from the ones in the small size 100x100. Those images are set using php as they are in the server, this is the part that im finding hard aswell I dont know how I would use javascript to alter the images from the php file.

PHP code to get the images

    $imgSet = "<img src='../ProductImages/$pID.jpg' class='image' onclick='openNav()'>";
    $imgZoom = "<img src='../ProductImages/$pID.jpg' width='600px' height='600px'>";
    $pInfo = "nothing for now";
    $pDetails = $row['PROD_DETAILS'];

    $sql = ("SELECT * FROM CHILD_IMG WHERE PROD_ID = '$pID';");
    $getQuery = $connection->query($sql);
    while($row = $getQuery->fetch_array()){
        $childID = $row['ID'];
        $parentID = $row['PROD_ID'];
        $childName = $parentID . "_".$childID.".jpg";
        $childImg .= "<img src='../ProductImages
        /ChildImages/$childName' class='imgBotSize' onclick='openNav()'>";
        Child images all the ones on the bottom of the big image
    }

Javascript

 function openNav() { document.getElementById("flow").style.height = "100%"; } function closeNav() { document.getElementById("flow").style.height = "0%"; } 

HTML

 <div id="flow" class="overlayImgContainer"> <a class="closebtn" onclick="closeNav()">&times;</a> <div class="overlay-img-content"> <a><?php echo $imgZoom;?></a> <div class="imgSlideGroup"> <a><?php echo $childImg;?></a> </div> </div> <div class="arrowBtn" style="right: 40px"> <img src="../arrow-right-white.png" width="70px" height="120px"> </div> <div class="arrowBtn" style="left: 40px"> <img src="../arrow-left-white.png" width="70px" height="120px"> </div> </div> 

Answer 1

If you have HTML like below

            <div class="leftArrow"></div>
            <div>
              <img src="../smaller.jpg" class="selectedImage">
            </div>
            <div class="rightArrow"></div>

And in JS you can select the clicked image and reset the url to bigger image and change the style of the image as below.

                var selectedImage =  document.querySelector('.selectedImage');
                selectedImage.onclick = function(){
                selectedImage.src = '../bigger/jpg';
                selectedImage.style.height = '400px';
                selectedImage.style.width = '300px';
            }

Hope this sample code will give some hint