CODEWITHSUNDEEP
phpajax
answerSeeker
answerSeeker

Reputation: 2772

Ajax for changing displayed image in php

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>

Upvotes: 0

Views: 441

Answers (1)

daremachine
daremachine

Reputation: 2788

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

Upvotes: 1

Related Questions