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

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

然后激活功能在data-refresh-img上添加a tag属性。一切都会为您服务。

JSFIDDLE

** 更新 **

如果您需要用图片替换任何数据，可以这样做

<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

Ajax用于更改php

1 个答案: