Блог

Я написал цикл while, в котором отображалась картинка, которую я сохранил, и я хочу, чтобы, когда пользователь нажимает кнопку на картинке, появлялся модал с изображением в нем. Это код, который я написал для отображения продуктов, и когда он нажимает кнопку, затем «onclick», он устанавливает сеанс, в котором я сохраняю изображение изображения и отображаю его в модальном режиме, но это не работает. Он делает только последнее отображаемое изображение. Как мне сделать так, чтобы отображалась выбранная мной картинка?

 <?php
$query_name="SELECT * FROM products WHERE active='1' ";
$result =  mysqli_query($conn, $query_name);
while($rows=mysqli_fetch_assoc($result))
{
    ?>

    <div class="block2">
        <div class="block2-pic hov-img0">
            <img  src="img/<?php echo $rows['picture']; ?> " alt="">

            <button href="#" onclick="<?php $_SESSION['what_picture']=$rows['picture']; ?>" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
                Quick View
            </button>
        </div>

            
    </div>

<?php } ?>
 

Это модальный

 <div class="wrap-modal1 js-modal1 p-t-60 p-b-20">
    <div class="overlay-modal1 js-hide-modal1"></div>

    <div class="container">
        <div class="bg0 p-t-60 p-b-30 p-lr-15-lg how-pos3-parent">
            <button class="how-pos3 hov3 trans-04 js-hide-modal1">
                <img src="images/icons/icon-close.png" alt="CLOSE">
            </button>

            <div class="row">
                <div class="col-md-6 col-lg-7 p-b-30">
                    <div class="p-l-25 p-r-30 p-lr-0-lg">
                        <div class="wrap-slick3 flex-sb flex-w">
                            <div class="wrap-slick3-dots"></div>
                            <div class="wrap-slick3-arrows flex-sb-m flex-w"></div>

                            <div class="slick3 gallery-lb">
                                <div class="item-slick3" data-thumb="images/product-detail-01.jpg">
                                    <div class="wrap-pic-w pos-relative">
                                        <img src="img/<?php echo $_SESSION['what_picture']; ?>" alt="IMG-PRODUCT">

                                        <a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="images/product-detail-01.jpg">
                                            <i class="fa fa-expand"></i>
                                        </a>
                                    </div>
                                </div>

                                
                            </div>
                        </div>
                    </div>
                </div>
                
                
            </div>
        </div>
    </div>
</div>
 

Вы должны сделать ajax для целевого элемента и показать в модели

Ошибка, которую вы совершаете здесь, находится по этой ссылке

 onclick="<?php $_SESSION['what_picture']=$rows['picture']; ?>"
 

Проблема здесь в том, что в атрибуте onclick вы не вызываете какую-либо функцию JavaScript. Что вам нужно, чтобы исправить это, так это вызвать функцию с $rows[‘picture’] в качестве параметра для нее.

Напр.

 onclick="setModelPicture(<?php echo $rows['picture']; ?>)"
 

В дополнение к этому, вам нужно сделать 2 вещи.

1. Дайте «идентификатор» изображению, на которое мы хотим нацелиться

идентификатор img = «динамическая модель изображения» alt=»IMG-ПРОДУКТ»

2. Необходимо определить следующую функцию JavaScript, чтобы установить изображение внутри модели в соответствии с тем, что вы передаете в функцию setModelPicture.

 function setModelPicture(picture){
   document.getElementById("dynamic-model-picture").src = picture;
}
 

В приведенном выше сценарии всякий раз, когда пользователь нажимает на изображение, путь к изображению (я полагаю, что он находится в строках $[«изображение»]) передается в функцию setModelPicture, и оттуда он обновляет атрибут src изображения.