Issues with php form and images isotope grid.

Php表格和图像同位素网格的问题。

I have Image Grid using isotope grid for some images that were added from the admin panel using PHP (form) the image grid is not working with the PHP (form) I think I added the grid class (class="work_content_area") in the wrong places, it should out of the form not in the form but I don't know how to add it correctly.

我有图像网格使用同位素网格的一些图像是从管理面板添加使用PHP(表单)的图像网格是不工作的PHP(表单)我想我添加了网格类(类=“Work_Content_Area”)在错误的地方，它应该不在表单中，但我不知道如何正确地添加它。

<section id="portfolio" class="gray_bg section_padding">
    <div class="container">
        <div class="col-md-12 col-sm-12-col-xs-12">
            <div class="section_heading text-center">
                <h1 class="port-title">OUR <span>PORTFOLIO</span></h1>
            </div>
        </div>
        <div class="row">
            <div class="work_filter text-left">
                <ul>
                    <li class="active" data-filter="*">All</li>
                    <li data-filter=".Media">Media</li>
                    <li data-filter=".Interior-Design">Interior Design</li>
                </ul>
            </div>
            <?php
            $select_products = $conn->prepare("SELECT * FROM `products`");
            $select_products->execute();
            if ($select_products->rowCount() > 0) {
                while ($fetch_product = $select_products->fetch(PDO::FETCH_ASSOC)) {
                    ?>
            <form action="" method="post" class="work_content_area">
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class=" thumbnail img-scale-in" data-hover-easing="easeInOut" data-hover-speed="700"
                        data-hover-bkg-color="#ffffff" data-hover-bkg-opacity="0.9">
                        <input type="hidden" name="pid" value="<?= $fetch_product['id']; ?>">
                        <input type="hidden" name="name" value="<?= $fetch_product['name']; ?>">
                        <input type="hidden" name="price" value="<?= $fetch_product['price']; ?>">
                        <input type="hidden" name="image" value="<?= $fetch_product['image_01']; ?>">
                        <!-- <a href="quick_view.php?pid=<?= $fetch_product['id']; ?>"
                                                class="fas fa-eye"></a> -->
                        <img src="uploaded_img/<?= $fetch_product['image_01']; ?>" alt="">
                    </div>
                </div>
            </form>
            <?php
                }
            } else {
                echo '<p class="empty">no products found!</p>';
            }
            ?>
        </div>
    </div>
</section>

JS*

JS*

    /* START ISOTOP JS */
    var $grid = $('.work_content_area').isotope({
        // options
    });
    // filter items on button click
    $('.work_filter').on('click', 'li', function () {
        var filterValue = $(this).attr('data-filter');
        $grid.isotope({ filter: filterValue });
    });
    // filter items on button click
    $('.work_filter').on('click', 'li', function () {
        $(this).addClass('active').siblings().removeClass('active')
    });
    /* END ISOTOP JS */

To expand on disinfor's comment, the issue you're facing is due to the fact that you're applying the isotope grid to the form element, which is being repeated for each product. The isotope grid should be applied to a parent container that contains all the items you want to filter.

详述Disinfor的评论，您面临的问题是因为您正在将同位素网格应用于表单元素，这对每个产品都是重复的。应将同位素栅格应用于包含要过滤的所有项目的父容器。

Here's how you can modify your code:

以下是修改代码的方法：

1. Wrap your form elements with a div that has the class "work_content_area".

   
   



2. Apply the isotope grid to this new div.

   
   

Here's the modified PHP and HTML code:

以下是修改后的PHP和HTML代码：

<div class="work_content_area">
    <?php
    $select_products = $conn->prepare("SELECT * FROM `products`");
    $select_products->execute();
    if ($select_products->rowCount() > 0) {
        while ($fetch_product = $select_products->fetch(PDO::FETCH_ASSOC)) {
            ?>
            <form action="" method="post">
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class=" thumbnail img-scale-in" data-hover-easing="easeInOut" data-hover-speed="700"
                        data-hover-bkg-color="#ffffff" data-hover-bkg-opacity="0.9">
                        <input type="hidden" name="pid" value="<?= $fetch_product['id']; ?>">
                        <input type="hidden" name="name" value="<?= $fetch_product['name']; ?>">
                        <input type="hidden" name="price" value="<?= $fetch_product['price']; ?>">
                        <input type="hidden" name="image" value="<?= $fetch_product['image_01']; ?>">
                        <!-- <a href="quick_view.php?pid=<?= $fetch_product['id']; ?>"
                                                class="fas fa-eye"></a> -->
                        <img src="uploaded_img/<?= $fetch_product['image_01']; ?>" alt="">
                    </div>
                </div>
            </form>
            <?php
        }
    } else {
        echo '<p class="empty">no products found!</p>';
    }
    ?>
</div>

And here's the modified JS code:

修改后的JS代码如下：

/* START ISOTOP JS */
var $grid = $('.work_content_area').isotope({
    // options
});
// filter items on button click
$('.work_filter').on('click', 'li', function () {
    var filterValue = $(this).attr('data-filter');
    $grid.isotope({ filter: filterValue });
});
// filter items on button click
$('.work_filter').on('click', 'li', function () {
    $(this).addClass('active').siblings().removeClass('active')
});
/* END ISOTOP JS */

This should solve your issue. The isotope grid will now be applied to the parent container that contains all the product forms.

这应该可以解决你的问题。现在，同位素网格将应用于包含所有产品表单的父容器。