reload a jpg that open in new window

[ace2]

I have a highlights page that refreshes the images every X seconds which works fine. These 6 stills are clickable which opens them in a new window, but i find the image is a cached version at times, what would be the best method making them reload completely once opened??

below is part of the main page refresh code i use, which is working great

Code: Select all

<script type="text/javascript">
refreshImage = function()
{
img = document.getElementById("im1");
img.src="7am.jpg?rand=" + Math.random();
</script>

And i add that into the page which refreshes fine.

Code: Select all

<a href="7am.jpg" target="_blank" ><img src="http://users.on.net/~ace2/7am.jpg" alt="7am.jpg" id="im1"></a><span style="color: #1A20CC">TAKEN AT 7AM</span>

But the clickable image sometimes loads a cached version instead of the refresh/reloaded version.
How could i fix this little issue, I know it's something really really simple!!!
Pages address is http://www.users.on.net/~ace2/highlights.htm if needed

[rogerthn]

My php code to solve this issue

Function to get the timestamp of a file

Code: Select all

function timestamp($filename)
{
  if (file_exists($filename))
    return date ("YmdHis", filemtime($filename));
  else
    return "File $filename not found";
}

Add the timestamp to href

Code: Select all

$image_timestamp = timestamp("image.jpg");
print ("<div align=\"center\"><a href=\"image.jpg\"><img src=\"image.jpg[b]?$image_timestamp[/b]\" height=\"85%\" alt=\"Latest picture\" title=\"Latest picture\"></a></div>\n");

Addition of ?$image_timestamp to href does the trick for me

[ace2]

My php code to solve this issue

Function to get the timestamp of a file

Code: Select all

function timestamp($filename)
{
  if (file_exists($filename))
    return date ("YmdHis", filemtime($filename));
  else
    return "File $filename not found";
}

Add the timestamp to href

Code: Select all

$image_timestamp = timestamp("image.jpg");
print ("<div align=\"center\"><a href=\"image.jpg\"><img src=\"image.jpg[b]?$image_timestamp[/b]\" height=\"85%\" alt=\"Latest picture\" title=\"Latest picture\"></a></div>\n");

Addition of ?$image_timestamp to href does the trick for me

Will php work with my HTML, my ISP doesn't allow/uee php according to there personal web space section...

[rogerthn]

It should be possible to do something similar with javascript.
The line "img.src="7am.jpg?rand=" + Math.random();" in your refreshImage function does it.

[mcrossley]

Try...

Code: Select all

<script type="text/javascript">
refreshImage = function()
{
img = document.getElementById("im1");
img.src="7am.jpg?rand=" + Math.random();
link = document.getElementById("lnk1");
link.href = "7am.jpg?rand= + Math.random();
</script>

Code: Select all

<a id="lnk1" href="7am.jpg" target="_blank" ><img src="http://users.on.net/~ace2/7am.jpg" alt="7am.jpg" id="im1"></a><span style="color: #1A20CC">TAKEN AT 7AM</span>

[ace2]

It should be possible to do something similar with javascript.
The line "img.src="7am.jpg?rand=" + Math.random();" in your refreshImage function does it.

That line updates the page images, but not the link ones opening in a new window.

[ace2]

Try...

Code: Select all

<script type="text/javascript">
refreshImage = function()
{
img = document.getElementById("im1");
img.src="7am.jpg?rand=" + Math.random();
link = document.getElementById("lnk1");
link.href = "7am.jpg?rand= + Math.random();
</script>

Code: Select all

<a id="lnk1" href="7am.jpg" target="_blank" ><img src="http://users.on.net/~ace2/7am.jpg" alt="7am.jpg" id="im1"></a><span style="color: #1A20CC">TAKEN AT 7AM</span>

Thanks, I'll give that a go

[ace2]

OK, that's all done, edited page on a nexus 4 phone, not an easy job I can tell you!!!
Now just need to test it.
Thanks mcrossley......

[ace2]

Try...

Code: Select all

link.href = "7am.jpg?rand= + Math.random();

Works now after adding the missing " after rand=........

[mcrossley]

Ah yes, it was tryped on my phone.

[ace2]

Ah yes, it was tryped on my phone.

HEY, that's my excuse!!!