Setting up modal images with dynamic image gallery using Ajax
I have a dynamic image gallery that uses a series of dropdowns, PHP, Ajax, and information from a database to display images based on the filters selected in the dropdown. I'd like to implement a modal aspect of this image gallery where I can click on an image to get a bigger picture displayed. I found the W3 Modal tutorial and I can follow it logically. However, I'm struggling with the organization of everything given the unique layout of my site.
Here's some simplified code in each relevant file:
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>
So, my biggest question is where the aspects of the modal implementation need to be placed. I'm thinking it has to be in getImages.php as that's where all of the images will actually reside, no?
Another problem I foresee is how to pass along the path to an image I want to display. The W3 tutorial just has one image hardcoded in, is there any way to pass a specific, unique image based on what the selectors display? I can easily add an ID on the imgContainer divs with the unique image path specific to a certain result, but I don't know how I would select that specific path with a javascript onClick function.
javascript php html ajax
edited Nov 24 '18 at 22:43
Shadow
25.7k92844
asked Nov 24 '18 at 22:24
HollywoodHollywood
9411
add a comment |
I have a dynamic image gallery that uses a series of dropdowns, PHP, Ajax, and information from a database to display images based on the filters selected in the dropdown. I'd like to implement a modal aspect of this image gallery where I can click on an image to get a bigger picture displayed. I found the W3 Modal tutorial and I can follow it logically. However, I'm struggling with the organization of everything given the unique layout of my site.
Here's some simplified code in each relevant file:
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>
So, my biggest question is where the aspects of the modal implementation need to be placed. I'm thinking it has to be in getImages.php as that's where all of the images will actually reside, no?
Another problem I foresee is how to pass along the path to an image I want to display. The W3 tutorial just has one image hardcoded in, is there any way to pass a specific, unique image based on what the selectors display? I can easily add an ID on the imgContainer divs with the unique image path specific to a certain result, but I don't know how I would select that specific path with a javascript onClick function.
javascript php html ajax
edited Nov 24 '18 at 22:43
Shadow
25.7k92844
asked Nov 24 '18 at 22:24
HollywoodHollywood
9411
add a comment |
I have a dynamic image gallery that uses a series of dropdowns, PHP, Ajax, and information from a database to display images based on the filters selected in the dropdown. I'd like to implement a modal aspect of this image gallery where I can click on an image to get a bigger picture displayed. I found the W3 Modal tutorial and I can follow it logically. However, I'm struggling with the organization of everything given the unique layout of my site.
Here's some simplified code in each relevant file:
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>
So, my biggest question is where the aspects of the modal implementation need to be placed. I'm thinking it has to be in getImages.php as that's where all of the images will actually reside, no?
Another problem I foresee is how to pass along the path to an image I want to display. The W3 tutorial just has one image hardcoded in, is there any way to pass a specific, unique image based on what the selectors display? I can easily add an ID on the imgContainer divs with the unique image path specific to a certain result, but I don't know how I would select that specific path with a javascript onClick function.
javascript php html ajax
edited Nov 24 '18 at 22:43
Shadow
25.7k92844
asked Nov 24 '18 at 22:24
HollywoodHollywood
9411
I have a dynamic image gallery that uses a series of dropdowns, PHP, Ajax, and information from a database to display images based on the filters selected in the dropdown. I'd like to implement a modal aspect of this image gallery where I can click on an image to get a bigger picture displayed. I found the W3 Modal tutorial and I can follow it logically. However, I'm struggling with the organization of everything given the unique layout of my site.
Here's some simplified code in each relevant file:
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>
So, my biggest question is where the aspects of the modal implementation need to be placed. I'm thinking it has to be in getImages.php as that's where all of the images will actually reside, no?
Another problem I foresee is how to pass along the path to an image I want to display. The W3 tutorial just has one image hardcoded in, is there any way to pass a specific, unique image based on what the selectors display? I can easily add an ID on the imgContainer divs with the unique image path specific to a certain result, but I don't know how I would select that specific path with a javascript onClick function.
javascript php html ajax
javascript php html ajax
edited Nov 24 '18 at 22:43
Shadow
25.7k92844
asked Nov 24 '18 at 22:24
HollywoodHollywood
9411
edited Nov 24 '18 at 22:43
Shadow
25.7k92844
asked Nov 24 '18 at 22:24
HollywoodHollywood
9411
edited Nov 24 '18 at 22:43
Shadow
25.7k92844
edited Nov 24 '18 at 22:43
Shadow
25.7k92844
edited Nov 24 '18 at 22:43
Shadow
25.7k92844
25.7k92844
asked Nov 24 '18 at 22:24
HollywoodHollywood
9411
asked Nov 24 '18 at 22:24
HollywoodHollywood
9411
asked Nov 24 '18 at 22:24
HollywoodHollywood
9411
9411
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53462883%2fsetting-up-modal-images-with-dynamic-image-gallery-using-ajax%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53462883%2fsetting-up-modal-images-with-dynamic-image-gallery-using-ajax%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
