<div class="row collapse">
<div id="first-row" class="small-11 small-centered large-uncentered large-12 columns">
<h1 class="text-center">Petoskey Harbor and Little Traverse Bay Camera</h1>
- <img alt="Little Traverse Bay" src="http://cams.gaslightmedia.com/cameras/images/GLM-Basin-MediumLarge.jpg?x=1">
+ <img id="cam1" alt="Little Traverse Bay" src="http://cams.gaslightmedia.com/cameras/images/GLM-Basin-MediumLarge.jpg?x=1">
</div>
</div>
<div class="row collapse">
<div class="small-11 small-centered large-uncentered large-12 columns">
- <p><a target="_blank" href="http://cams.gaslightmedia.com/cameras/images/GLM-Basin-Large.jpg?x=1">Full Resolution</a> • <a href="#">Refresh Image</a> (image updates at one minute intervals) •<a href="<?php echo home_url('/'); ?>web-cam-policy/"> Web Camera Image Policy </a></p>
+ <p><a target="_blank"
+href="http://cams.gaslightmedia.com/cameras/images/GLM-Basin-Large.jpg?x=1">Full Resolution</a> • <a id="rCam1" href="#">Refresh Image</a> (image updates at one minute intervals) •<a href="<?php echo home_url('/'); ?>web-cam-policy/"> Web Camera Image Policy </a></p>
</div>
</div>
<div id="second-row" class="row collapse">
<div id="down-town" class="small-11 small-centered large-uncentered large-8 columns">
<h2 class="text-center large-text-left">Downtown Petoskey</h2>
- <img alt="Downtown Petoskey" src="http://cams.gaslightmedia.com/cameras/images/GLM-Downtown-Medium.jpg?x=1">
+ <img id="cam2" alt="Downtown Petoskey" src="http://cams.gaslightmedia.com/cameras/images/GLM-Downtown-Medium.jpg?x=1">
</div>
<div class="show-for-large-up large-4 columns text-center right">
- <div class="iframe-screen">
- <a href="https://player.vimeo.com/video/128990353" class="fancybox fancybox.iframe" data-fancybox-type="iframe">
+ <div class="iframe-screen">
+ <a href="https://player.vimeo.com/video/128990353" class="fancybox fancybox.iframe" data-fancybox-type="iframe">
</a>
</div>
<h3 class="text-center large-text-left">Featured Video</h3>
<iframe src="https://player.vimeo.com/video/128990353" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="show-for-medium-down small-11 columns small-centered">
- <p><a target="_blank" href="http://cams.gaslightmedia.com/cameras/images/GLM-Downtown-Medium.jpg?x=1">Full Resolution</a> • <a href="#">Refresh Image</a> (image updates at one minute intervals) •<a href="<?php echo home_url('/'); ?>web-cam-policy/"> Web Camera Image Policy </a></p>
+ <p><a target="_blank" href="http://cams.gaslightmedia.com/cameras/images/GLM-Downtown-Medium.jpg?x=1">Full Resolution</a> • <a id="rCam2" href="#">Refresh Image</a> (image updates at one minute intervals) •<a href="<?php echo home_url('/'); ?>web-cam-policy/"> Web Camera Image Policy </a></p>
</div>
</div>
<div class="row">
</div>
</div>
<div id="final-row" class="row large-collapse show-for-large-up">
- <p><a target="_blank" href="http://cams.gaslightmedia.com/cameras/images/GLM-Downtown-Medium.jpg?x=1">Full Resolution</a> • <a href="#">Refresh Image</a> (image updates at one minute intervals) • <a href="<?php echo home_url('/'); ?>web-cam-policy/"> Web Camera Image Policy </a> </p>
+ <p><a target="_blank"
+href="http://cams.gaslightmedia.com/cameras/images/GLM-Downtown-Medium.jpg?x=1">Full Resolution</a> • <a id="rCam3" href="#">Refresh Image</a> (image updates at one minute intervals) • <a href="<?php echo home_url('/'); ?>web-cam-policy/"> Web Camera Image Policy </a> </p>
</div>
-
+
<div class="row">
<div id="deal-small" class="small-12 text-center large-text-left large-3 columns show-for-medium-down">
<a id="advent" href="<?php echo get_permalink(15); ?>"> Adventures</a>
</div>
<?php get_template_part('parts/main-content'); ?>
</div>
-
+
+ <script>
+ setInterval(function(){
+ refreshCam1();
+ refreshCam2();
+ }, 60000);
+ function refreshCam1() {
+ jQuery('#cam1').attr('src', 'http://cams.gaslightmedia.com/cameras/images/GLM-Basin-MediumLarge.jpg?x=1?t=' + Date.now());
+ }
+ function refreshCam2() {
+ jQuery('#cam2').attr('src', 'http://cams.gaslightmedia.com/cameras/images/GLM-Downtown-Medium.jpg?x=1&t=' + Date.now());
+ }
+ jQuery('#rCam1').click(function(e){
+ e.preventDefault();
+ refreshCam1();
+ return false;
+ });
+ jQuery('#rCam2').click(function(e){
+ e.preventDefault();
+ refreshCam2();
+ return false;
+ });
+ jQuery('#rCam3').click(function(e){
+ e.preventDefault();
+ refreshCam2();
+ return false;
+ });
+ </script>
<!--
<div class="row">
<div class="small-12 medium-4 columns">