实时更改图像

Question

Well, I've just started a project and I'm already stuck, I real need a help.

I have 16 (4x4) images and I'm presenting them in a page.

$max_images = $_GET['images'];
$num_images = $max_images;
while  (($num_images > 0) && ($num_images <= $max_images))
{
echo '<img class="nomarge" alt="" src="image' . $num_images . '.jpeg"/>';
$num_images--;
}

They all have names like "image1.jpeg, image2.jpeg, ..." so this will work. Now, I want to change only one of the 16 images without a reload, and only if the image in the source is different from the one shown.

Basically, I think I need to build something similar to the code presented in the stock markets (http://economico.sapo.pt/ is an excellent example of what I'm trying to do, on the right down corner, it shows a stock variation that is always changing, and it is not always reloading all the page, not even all the results, only the ones that change)

What is the best way to do that, and do you know any examples like these with images?

Answer 1

In order to change one of your images, the best practice is usually to attach an id to each of your <img> tags, that way you can select one specifically by its id.

Your current code isn't necessarily bad, but the normal convention for iterating through something like that would be to use a for loop, as follows:

$count = $_GET['images'];

for ($i = 1; $i <= count; $i++){
    echo '<img class="nomarge" alt="" src="image' . $i . '.jpeg" id="image' . $i  .'" />';
}

Notice I added id to the end of each tag and now your images have the ids image1, image2 ... image16.

Now, I want to change only one of the 16 images without a reload, and only if the image in the source is different from the one shown.

I'm not exactly sure what this means, but assuming you have detected that 'the image in the source is different from the one shown', you can select a specific image and replace its source using the following jQuery:

$("#image1").attr("src", "https://www.newimagesource.com" );

Hope this helps!