Ajax for changing displayed image in php - php

Question

Currently, if no images have been clicked, I get my selected image like this and it's also what's shown on first page load.
$pictures = Picture::getPictures($album->getId());
$selectedPicture = $pictures[0];
It selects the first picture and display it like this:
<img src="<?php echo $selectedPicture->getOriginalFilePath($user->getId()); ?>" >
I am trying to change the selected image when a user clicks on a different thumbnail because this is just one of many images of an album.
Attempt with a ajax, I'm not really experienced with it so I couldn't get it to work
<script type="text/javascript">
function Func() {
$.ajax({
type: "POST",
url: "RefreshImage.php",
success: function (json) {}, error: function () {}
})
}
</script>
Then the php portion also has something like to create the thumbnails so that a user can clicks on one, it displays the image. But I'm not sure how to do that.
foreach ($pictures as $pic) {
$output.= "<a href='" . $pic->getOriginalFilePath($user->getId()) . "'> <img style='width:120px;height:120px' "
. "src='" . $pic->getThumbnailFilePath($user->getId()) . "'"
. "name='" . $pic->getFileName() . "' "
. "onClick='Func'></a>";
}
RefreshImage.php content
session_start();
$user = $_SESSION['user'];
//$albums = Album::getAlbums($user->getId());
if (isset($_POST["chosenAlbid"])) {
$album_id = $_POST["chosenAlbid"];
$user = $_SESSION['user'];
$album = Album::getAlbumById($user->getId(), $album_id);
$pictures = Picture::getPictures($album->getId());
$selectedPicture = $pictures[1];
}
?>
<div id="imagecontainer">
<div>
<p style="float: left;"><img style="width:500px;height:400px" src="<?php echo $selectedPicture->getOriginalFilePath($user->getId()); ?>" ></p>
<p><span>
<h4> Description</h4>
</span><?php echo $selectedPicture->getDescription() ?></p>
</div>
</div>

Answer 1

If you rewrite your function into jQuery it will be more easy.
From this
function Func() {
$.ajax({
type: "POST",
url: "RefreshImage.php",
success: function (json) {}, error: function () {}
})
}
To jQuery
$('a[data-refresh-img]').click(function(e) {
e.preventDefault(); // block ahref redirect
$('#imagecontainer img').attr('src', $(this).attr('href')); // replace image
);
Then activate function add data-refresh-img attribute on a tag.
And all will work for you.
JSFIDDLE
** UPDATE **
If you need replace any data with image you can do this
<a data-refresh-img href="original_img_path">
<img
title="picture one"
src="thumbnail_img_path" height=50>
<span style="display: none"><?php echo $selectedPicture->getDescription() ?> AAA</span>
</a>
And change function to
$('a[data-refresh-img]').click(function(e) {
e.preventDefault(); // block ahref redirect
$('#imagecontainer img').attr('src', $(this).attr('href')); // replace image
$('#imagecontainer img').attr('title', $(this).find('img').attr('title')); // replace title
$('#imagecontainer span[data-description]').html($(this).find('span').html()); // replace description
});
JSFIDDLE 2