OK, here is the code, we can play around with the colors later based on what you like.
Please upload it to your server and then see if it works. It should update every 30 seconds. The images should popup full screen when clicked.
Post here a link so that I can make sure it works.
Thanks
<html>
<head>
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/black-tie/jquery-ui.css">
<style>
.webcam{
width:98%;
margin:0 auto;
opacity: 0.85;
cursor: pointer;
border-radius:10px;
border: 1px solid black;
}
.webcam:hover{
opacity: 1;
}
h1{
font-variant:small-caps;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Phil's Backyard Webcams</h1>
<table style="width:98%;margin:0 auto">
<tr>
<td style="width:50%;text-align:center">
<img src="
http://weather.inverellit.com/images/Wcam1.jpg" id="webcam1" class="webcam">
</td>
<td>
<img src="
http://weather.inverellit.com/images/Wcam2.jpg" id="webcam2" class="webcam">
</td>
</tr>
</table>
<div style="position:absolute;text-align:center;bottom:10px;margin:0 auto;width:100%">
<strong>Inverell NSW</strong><br>Latitude S 29° 46' 26" Longitude E 151° 07' 14" Elevation 586 m
</div>
<div id="fullWindow" title="Webcam"></div>
</body>
<script>
setInterval(function(){ imageUpdate(); }, (30*1000));
function imageUpdate(){
timestamp = new Date();
timestamp = "?"+timestamp.getTime();
$("#webcam1").attr("src","
http://weather.inverellit.com/images/Wcam1.jpg" + timestamp);
$("#webcam2").attr("src","
http://weather.inverellit.com/images/Wcam2.jpg" + timestamp);
}
dialogHeight = screen.height*0.9;
dialogWidth = screen.width*0.9;
$("#fullWindow").dialog({
modal: true,
autoOpen: false,
height: dialogHeight,
width: dialogWidth
});
$(".webcam").click(function(){
src = $(this).attr("src");
popupImage(src);
});
function popupImage(src){
$("#fullWindow").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
$("#fullWindow").dialog('open');
}
</script>
</html>