Question

我试图弄清楚如何在没有页面刷新的情况下更改照片。我已经看到了一些示例，但是无法弄清楚如何在我的工作页面中实现它。

这就是我现在所拥有的：

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

感谢任何帮助。干杯

迪马

Answer 1

你应该使用ajax来获得这样的结果。

Answer 2

你应该去这里，本演示中显示的图像滑块是免费的。有关详细说明，请访问在线

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

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

2 个答案: