更改图像而不重新加载页面

I am trying to figure out how to change the photo without the page refreshing. I have seen some of the example but just cannot figure out how to implement it in to my working page.

This is what I have right now:

<div id="propertyDetailsImage">
<img class="image photo" src="<?php echo $property->photos->photo[$mainPhoto - 1]->url; ?>" width="<?php echo $property->mainPhotoWidth * 0.77 ?>" height="<?php echo $property->mainPhotoHeight * 0.77 ?>"  alt="<?php echo $property->address->full; ?>"/>
</div>

<div class="photoPosition">

<?php

$previousPhoto = $mainPhoto - 1;
if($previousPhoto == 0) {
$previousPhoto = $property->totalPhotos;
}

$nextPhoto = $mainPhoto + 1;
if ($nextPhoto > $property->totalPhotos) {
$nextPhoto = intval(1);

}

?>


<a href="property-details.php?propertyID=<?php echo $property->reference; ?>&photo=<?php echo $previousPhoto; ?>" onclick="return showPreviousPhoto()"><img src="images/previous.png" alt="Previous photo" height="12" width="13" border="none"/></a>
<span id="photoPosition"><?php echo $mainPhoto; ?></span> of <?php echo $property>totalPhotos; ?>
<a href="property-details.php?propertyID=<?php echo $property->reference; ?>&photo=<?php   echo $nextPhoto; ?>" onclick="return showNextPhoto()"><img src="images/next.png" alt="Next photo" height="12" width="13" border="none" /></a>
</div>
</div>
<div class="col-md-6">
<div id="thumbnails">

<h3 class="additional">Photos</h3>

<?php 
// Iterate throught the list of photos
foreach($property->photos->photo as $photo) {
?>
<script type="text/javascript">
    addPhoto(
        <?php echo $photo->id; ?>,
        <?php echo $photo->width; ?>,
        <?php echo $photo->height; ?>,
        "<?php echo $photo->caption; ?>");
</script>

<a href="property-details.php?propertyID=<?php echo $property->reference; ?>&photo=<?php echo $photo->position; ?>"><img src="<?php echo $photo->url; ?>" width="<?php echo $photo->widthSmall; ?>" height="<?php echo $photo->heightSmall; ?>" class="image photo" id="photo<?php echo $photo->position; ?>" alt="Additional Photo of <?php echo $photo->address->advertising; ?>" onclick="return showPhoto(<?php echo $photo->position; ?>)" /></a>
<?php } 
?>

Any help is appreciated. Cheers

Dima

You should use ajax to get like this results.

you should go here, The image slider shown in this demo is for free. For detailed instructions, please visit online

http://www.menucool.com/slider/javascript-image-slider-demo1