Question

我有一个动态图像画廊，该画廊使用一系列下拉列表，PHP，Ajax和数据库中的信息来根据下拉列表中选择的过滤器显示图像。我想实现此图片库的模式方面，在其中可以单击图片以显示更大的图片。我找到了W3 Modal tutorial，因此可以合理地遵循它。但是，鉴于网站的独特布局，我正在努力组织所有工作。

每个相关文件中都有一些简化的代码：

gallery.php

<html>
<head>
    <script>
        function changeParams() {
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            } else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("results").innerHTML = this.responseText;
            }
            };
        // Here I have a bunch of document.getElementById selectors to get the different attributes that I can select by. Just a few listed for example
        year = document.getElementById("years_select").value;
        first = document.getElementById("name_select_first").value;
        last = document.getElementById("name_select_last").value;

        url = getImages.php?year="+year+"&first="+first+"&last="+last;
        xmlhttp.open("GET", url, true);
        xmlhttp.send();
    </script>
</head>
<body>
<div class="content">
    <form>
        // Here I have a bunch of selectors that are initialized by reading information from my database so you can't select a name that isn't in the DB. Only year listed to keep things a bit more concise
        <select onchange="changeParams()" name="years" id="years_select">
        <option value="All">Year</option>
        <?php
            // Here I just get all years that are in my DB and echo a select option for each one. Excluding the connection setup and all that to keep things more concise
            while ($row = mysqli_fetch_array($result)) {
                echo "<option value=" . $row['year'] . ">" . $row['year'] . "</option>";
            }
        ?>
        // Again, more selectors here, they just follow the same pattern though
    </form>
    <div id="results">Choose some selectors to see results!</div>
</div>
</body>
</html>

getImages.php

<html>
<head>
    // Bunch of styling so the images look nice and in a table format with a short description underneath
</head>
<body>
    <?php
        // Some basic work to get the data I pass in from gallery.php. Just listing one here to be concise
        $year = $_GET['year'];
        // Then some logic and string manipulation to build up an sql statement based on what information is given. Just one listed here to be concise
        if ($year != "All") {
            $sql = "select * from myTable where year = '" . $year . "'";
        }
        // Some additional work to finalize sql statement with ordering
        $result = mysqli_query($conn, $sql);
        $num_result = mysqli_num_rows($result);
        if ($num_results == 0) {
            echo "<p>No cards matched your query. Try refining your search terms to get some results.</p>";
        } else {
            echo "<div class=results>";
            echo "<div>";
            while ($row = mysqli_fetch_array($result)) {
                $pic = $row['pathToPic']; // This is a string with the location of the image to display on my server
                // All these variables are valid in my code, might have missed setting them here while trying to keep things a reasonable length
                echo "<div class=fullContainer><div class=imgContainer><img class=image src=" . $wwwImg ."></div><p class=text>" . $row['fullInfo'] . "</p></div>";
            }
            echo "</div></div>";
        }
        mysqli_close($conn);
    }
    ?>
</body>
</html>

所以，我最大的问题是模式实现的各个方面需要放在哪里。我想它必须在getImages.php中，因为那是所有图像的实际存放位置，不是吗？

我预见的另一个问题是如何沿路径传递到要显示的图像。 W3教程仅硬编码了一张图像，是否有任何方法可以根据选择器显示的内容传递特定的唯一图像？我可以在imgContainer div上轻松添加一个ID，该ID具有特定于特定结果的唯一图像路径，但是我不知道如何使用javascript onClick函数选择该特定路径。

使用Ajax使用动态图像库设置模式图像

0 个答案: