Web Weather > Weather Web Cam Links
Webcam Page Code
Phil23:
--- Quote from: Cutty Sark Sailor on June 09, 2021, 06:29:58 PM ---You want it like this, Right?
https://frankfortweather.us/phil/Phil%27s%20Backyard%20Weather%20Webcam.htm
All you need do is add the size as I posted above:
--- End quote ---
Just revisiting this today; Looks like you've edited your example.
It was showing 3 images the same size yesterday, but on refreshing the first image is 100% & the ones under it 50%.
Got mine looking how I want, but believe your code is really a better solution.
My latest kludge that relies on 3 tables & a margin on the left.
Cutty Sark Sailor:
--- Quote from: Phil23 on June 11, 2021, 08:33:02 PM ---
--- Quote from: Cutty Sark Sailor on June 09, 2021, 06:29:58 PM ---You want it like this, Right?
https://frankfortweather.us/phil/Phil%27s%20Backyard%20Weather%20Webcam.htm
All you need do is add the size as I posted above:
--- End quote ---
Just revisiting this today; Looks like you've edited your example.
It was showing 3 images the same size yesterday, but on refreshing the first image is 100% & the ones under it 50%.
Got mine looking how I want, but believe your code is really a better solution.
My latest kludge that relies on 3 tables & a margin on the left.
--- End quote ---
Er.... actually when you 'lost' the popup, I removed my tidbits to 'look see', got interrupted and forget to put it back... I'll be dropping that file off host in a day or two. You note it still is just one table? I don't have your fixed js, so the popup doesn't work..
Phil23:
Thanks Cutty,
I'm getting to the bottom of it now with adding the width after the image.
--- Code: --- <td colspan="2" style="width:100%;text-align:center">Esp32 Test Camera<br>
<small>Click Image below for Larger Image</small><br>
<img src="Phil's%20Backyard%20Weather%20Webcam_files/Esp32-Cam.jpg" id="webcam3" class="webcam" style="width:50%">
</td>
--- End code ---
Other thing I notice is your sample is that the top image does not have the rounded corners.
(My mistake editing in Developer view).
I have updated the Script so it's more readable, 1,2,3,4 references now replaced by more logical N,S,E,W.
(And learnt that you can't use "-" in Function names)???
This is the latest revision I made before trying to revert to a single table.
Cheers
Phil.
--- Code: ---<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Phil's Backyard weather data" />
<meta name="keywords" content="Cumulus, Phil's Backyard weather data, weather, data, weather station" />
<title>Phil's Backyard Weather Webcam</title>
<link href="http://weather.inverellit.com/weatherstyle.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/black-tie/jquery-ui.css">
<style>
.webcam{
width: 98%;
margin:0 auto;
opacity: 1.00;
cursor: pointer;
border-radius:10px;
border: 1px solid black;
}
.webcam:hover{
opacity: 1;
}
</style>
<body>
<div id="content">
<h1>Phil's Backyard Weather</h1>
<h2 style="text-align: left; text-transform: none;"> Latitude S 29° 46' 26" Longitude E 151° 07' 14" Elevation 586 m</h2>
<!-- Start of navigation menus at the top -->
<table style="width:100%;border-collapse: collapse; border-spacing: 0;" >
<tr>
<td colspan="4" class="td_navigation_bar">:<a href="index.htm">now</a>: :<a href="today-yesterday.htm">today/yesterday</a>: :<a href="datasummary.php">daily data</a>: :<a href="thismonth.htm">this month</a>: :<a href="thisyear.htm">this year</a>: :<a href="record.htm">records</a>: :<a href="monthlyrecord.htm">monthly records</a>:<br>:<a href="gauges.htm">gauges</a>: :<a href="graphs.htm">graphs</a>: :<a href="wz.htm">weatherzone</a>: :<a href="https://cumulus.hosiene.co.uk/" target="_blank">forum</a>: :<a href="https://weather.inverellit.com/pws/" target="_blank">dashboard</a>: :<a href="http://weather.inverellit.com/webcams.htm">webcam</a>:</td>
</tr>
</table>
<!-- End of navigation menus at the top -->
</div>
<div id="widecontent">
<p>Webcams will update once a minute.</p>
<table style="text-align: center; width: 50%; margin-left: 25%" border="0" cellpadding="1" cellspacing="25%">
<tbody>
<tr>
<td style="width:50%;text-align:center">North Facing Camera<br/>Esp32-Cam<br/>
<small>Click Image below for Larger Image</small><br/>
<img src="http://weather.inverellit.com/images/Esp32-Cam-Nth.jpg" id="webcam-N" class="webcam">
</td>
</tr>
</tbody>
</table>
<table style="text-align: center; width: 100%;" border="0" cellpadding="1" cellspacing="0">
<tbody>
<tr>
<td style="width:50%;text-align:center">West Facing Camera<br/>
<small>Click Image below for Larger Image</small><br/>
<img src="http://weather.inverellit.com/images/Wcam1.jpg" id="webcam-W" class="webcam">
</td>
<td style="width:50%;text-align:center">East Facing Camera<br/>
<small>Click Image below for Larger Image</small><br/>
<img src="http://weather.inverellit.com/images/Wcam2.jpg" id="webcam-E" class="webcam">
</td>
</tr>
</tbody>
</table>
<table style="text-align: center; width: 50%; margin-left: 25%" border="0" cellpadding="1" cellspacing="25%">
<tbody>
<tr>
<td style="width:50%;text-align:center">South Facing Camera<br/>Esp32 Test<br/>
<small>Click Image below for Larger Image</small><br/>
<img src="http://weather.inverellit.com/images/Esp32-Cam.jpg" id="webcam-S" class="webcam">
</td>
</tr>
</tbody>
</table>
</div>
<div id="content">
<!-- Start of navigation menus at the bottom -->
<table style="width:100%;border-collapse: collapse; border-spacing: 0;" >
<tr>
<td colspan="4" class="td_navigation_bar">
:<a href="index.htm">now</a>: :<a href="today.htm">today</a>: :<a href="yesterday.htm">yesterday</a>: :<a href="datasummary.php">daily data</a>: :<a href="thismonth.htm">this month</a>: :<a href="thisyear.htm">this year</a>: :<a href="record.htm">records</a>: :<a href="monthlyrecord.htm">monthly records</a>:<br>
:<a href="gauges.htm">gauges</a>: :<a href="graphs.htm">graphs</a>: :<a href="wz.htm">weatherzone</a>: :<a href="https://cumulus.hosiene.co.uk/" target="_blank">forum</a>: :<a href="https://weather.inverellit.com/pws/" target="_blank">dashboard</a>: :<a href="http://weather.inverellit.com/webcams.htm">webcam</a>:<br>
:<a href="fwi.php">fire index</a>: :<a href="fwgraphs.php">fwi graphs</a>: :<a href="top10.php">top10</a>: :<a href="betel_monthlyrecord_mx.html">extremes</a>: :<a href="sysinfo.php">sysinfo</a>:
</td>
</tr>
</table>
<!-- End of navigation menus at the bottom -->
<br><br><br>
<a href="http://cumulussites.net/" target="_blank"><img src="http://cumulussites.net/button.php?u=Phil23" alt="Cumulus Top Weather Sites" border="0" width="162" height="55"></a>
</div>
<div id="fullWindow_N" title="North Camera"></div>
<div id="fullWindowS" title="South Camera"></div>
<div id="fullWindowE" title="East Camera"></div>
<div id="fullWindowW" title="West Camera"></div>
<!--</body>-->
<script>
imageUpdate();
setInterval(function(){ imageUpdate(); }, (30*1000));
function imageUpdate(){
timestamp = new Date();
timestamp = "?"+timestamp.getTime();
$("#webcam-N").attr("src","http://weather.inverellit.com/images/Esp32-Cam-Nth.jpg" + timestamp);
$("#webcam-S").attr("src","http://weather.inverellit.com/images/Esp32-Cam.jpg" + timestamp);
$("#webcam-E").attr("src","http://weather.inverellit.com/images/Wcam2.jpg" + timestamp);
$("#webcam-W").attr("src","http://weather.inverellit.com/images/Wcam1.jpg" + timestamp);
}
dialogHeight = screen.height*0.85;
dialogWidth = screen.width*0.63;
$("#fullWindow_N").dialog({
modal: true,
autoOpen: false,
height: dialogHeight,
width: dialogWidth
});
$("#fullWindowS").dialog({
modal: true,
autoOpen: false,
height: dialogHeight,
width: dialogWidth
});
$("#fullWindowE").dialog({
modal: true,
autoOpen: false,
height: dialogHeight,
width: dialogWidth
});
$("#fullWindowW").dialog({
modal: true,
autoOpen: false,
height: dialogHeight,
width: dialogWidth
});
$("#webcam-N").click(function(){
src = $(this).attr("src");
popupImage_N(src);
});
$("#webcam-S").click(function(){
src = $(this).attr("src");
popupImage_S(src);
});
$("#webcam-E").click(function(){
src = $(this).attr("src");
popupImage_E(src);
});
$("#webcam-W").click(function(){
src = $(this).attr("src");
popupImage_W(src);
});
function popupImage_N(src){
$("#fullWindow_N").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
$("#fullWindow_N").dialog('open');
}
function popupImage_S(src){
$("#fullWindowS").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
$("#fullWindowS").dialog('open');
}
function popupImage_E(src){
$("#fullWindowE").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
$("#fullWindowE").dialog('open');
}
function popupImage_W(src){
$("#fullWindowW").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
$("#fullWindowW").dialog('open');
}
</script>
</body>
</html>
--- End code ---
Phil23:
Think I'm almost there with http://weather.inverellit.com/webcams8.htm
Open to any fine tuning & improvement.
One issue that has existed since the original version is the "Click for Larger Image" when viewing on Mobile devices.
It has always been fine on PC's, but tapping the image on a phone gives a tall stretched image.
Thanks
Phil
Navigation
[0] Message Index
[*] Previous page
Go to full version