Page 1 of 1

reload a jpg that open in new window

Posted: Sun 05 Oct 2014 4:28 am
by 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

Re: reload a jpg that open in new window

Posted: Sun 05 Oct 2014 6:55 am
by 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

Re: reload a jpg that open in new window

Posted: Sun 05 Oct 2014 7:21 am
by ace2
rogerthn wrote: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...

Re: reload a jpg that open in new window

Posted: Sun 05 Oct 2014 7:39 am
by 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.

Re: reload a jpg that open in new window

Posted: Sun 05 Oct 2014 8:49 am
by 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>

Re: reload a jpg that open in new window

Posted: Sun 05 Oct 2014 9:01 am
by ace2
rogerthn wrote: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.

Re: reload a jpg that open in new window

Posted: Sun 05 Oct 2014 9:05 am
by ace2
mcrossley wrote: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

Re: reload a jpg that open in new window

Posted: Sun 05 Oct 2014 9:31 am
by ace2
OK, that's all done, edited page on a nexus 4 phone, not an easy job I can tell you!!! :D
Now just need to test it.
Thanks mcrossley......

Re: reload a jpg that open in new window

Posted: Tue 07 Oct 2014 2:18 am
by ace2
mcrossley wrote:Try...

Code: Select all

link.href = "7am.jpg?rand= + Math.random();
Works now after adding the missing " after rand=........

Re: reload a jpg that open in new window

Posted: Tue 07 Oct 2014 6:38 am
by mcrossley
Ah yes, it was tryped on my phone.

Re: reload a jpg that open in new window

Posted: Tue 07 Oct 2014 9:49 am
by ace2
mcrossley wrote:Ah yes, it was tryped on my phone.

HEY, that's my excuse!!!