У меня есть динамическая галерея изображений, которая использует ряд раскрывающихся списков, PHP, Ajax и информацию из базы данных для отображения изображений на основе фильтров, выбранных в раскрывающемся списке.Я хотел бы реализовать модальный аспект этой галереи изображений, где я могу щелкнуть изображение, чтобы получить увеличенное изображение.Я нашел W3 Модальное руководство , и я могу следовать ему логически.Однако я борюсь с организацией всего, учитывая уникальный макет моего сайта.
Вот несколько упрощенных кодов в каждом соответствующем файле:
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 только одно изображение жестко запрограммировано, есть ли способ передать конкретное, уникальное изображение в зависимости от того, что отображают селекторы?Я могу легко добавить идентификатор в div imgContainer с уникальным путем к изображению, характерным для определенного результата, но я не знаю, как бы я выбрал этот конкретный путь с помощью функции javascript onClick.