в простейшем случае это может выглядеть так
<style>
img {
height: 100px;
}
</style>
<a href="#">car</a><br/>
<a href="#">animals</a>
<div class="content"></div>
<script>
document.addEventListener("DOMContentLoaded", function(e) {
var content = document.getElementsByClassName("content")[0];
var links = document.getElementsByTagName("a");
for (var i = 0, length = links.length; i < length; i++) {
links[i].addEventListener("click", function () {
var xhr = new XMLHttpRequest();
params = "test=" + encodeURIComponent(this.innerHTML);
xhr.open('POST', 'some.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(params);
xhr.onreadystatechange = function() {
if (xhr.readyState == xhr.DONE) {
if(xhr.status == 200) {
content.innerHTML = xhr.responseText;
}
}
}
});
}
});
</script>
some.php
function images($dir) {
$files = array_diff(scandir($dir), array(".", ".."));
foreach($files as $value) {
$path = $dir."/".$value;
if (/*!is_dir($path) &&*/ pathinfo($path)["extension"] == "jpg") {
echo "<img src='".$path."'/>";
}
}
}
if (!empty($_POST["test"])) images($_POST["test"]);
