Ajax для изменения отображаемого изображения в php

Question

В настоящее время, если ни одно изображение не было нажато, я получаю выбранное изображение таким образом, и оно также отображается при первой загрузке страницы.

$pictures = Picture::getPictures($album->getId());
$selectedPicture = $pictures[0];

Он выбирает первое изображение и отображает его следующим образом:

<img src="<?php echo $selectedPicture->getOriginalFilePath($user->getId()); ?>" >

Я пытаюсь изменить выбранное изображение, когда пользователь нажимает на другой эскиз, потому что это только одно из многих изображений альбома.

Попытка с помощью ajax, яЯ не очень разбирался в этом, поэтому я не смог заставить его работать

<script type="text/javascript">
            function Func() {
                $.ajax({
                    type: "POST",
                    url: "RefreshImage.php",
                    success: function (json) {}, error: function () {}
                })
            }
 </script>

Тогда в части php также есть что-то вроде создания миниатюр, так что пользователь может кликнуть по ним, он отображает изображение.Но я не уверен, как это сделать.

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

Если вы переписываете свою функцию в jQuery, вам будет проще.

Из этого

function Func() {
  $.ajax({
    type: "POST",
    url: "RefreshImage.php",
    success: function (json) {}, error: function () {}
  })
}

В jQuery

$('a[data-refresh-img]').click(function(e) {
   e.preventDefault(); // block ahref redirect
   $('#imagecontainer img').attr('src', $(this).attr('href')); // replace image
);

Затем активируйте функцию add data-refresh-img атрибут a tag.И все будет работать для вас.

JSFIDDLE

** ОБНОВЛЕНИЕ **

Если вам нужно заменить любые данные наimage Вы можете сделать это

<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>

И изменить функцию на

$('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