What are some common approaches to changing images dynamically in PHP when a thumbnail is clicked?

One common approach to changing images dynamically in PHP when a thumbnail is clicked is to use AJAX to fetch the new image and update the src attribute of the main image element. This allows for a seamless transition between images without reloading the entire page. 

<?php
if(isset($_GET['image'])) {
    $image = $_GET['image'];
} else {
    $image = 'default.jpg';
}
?>

<img id="mainImage" src="<?php echo $image; ?>" alt="Main Image">

<?php
$thumbnails = ['thumbnail1.jpg', 'thumbnail2.jpg', 'thumbnail3.jpg'];

foreach($thumbnails as $thumbnail) {
    echo '<img class="thumbnail" src="'.$thumbnail.'" onclick="changeImage(\''.$thumbnail.'\')">';
}
?>

<script>
function changeImage(image) {
    document.getElementById('mainImage').src = image;
}
</script>

Keywords

image manipulation PHP GD library event handling AJAX dynamic image loading

Related Questions